I am trying to import JQuery and JQuery into a project using ES6 syntax using Babel and Browserify to package the code. From what I have been able to figure out the problem is that JQuery UI expects jQuery to be defined as a global variable. I tried setting the global variable after importing jQuery and before importing JQuery UI like this:
import { default as $, default as jQuery} from 'jquery';
wiindow.jQuery = jQuery;
window.$ = $;
import 'jquery-ui';
but it seems browserify puts all imports at the top of the file, so the globals are defined too late. I understand that webpack provides a way to define globals but is there a workaround for browserify?
Try this
window.$ = window.jQuery = import $ from "jquery";
or
import { default as $, default as jQuery} from 'jquery';
window.jQuery = windows.$ = jQuery;
Related
I'm working on a Symfony5 project, with Yarn & jQuery. I have an error when I try to use the jQuery plugin "isotope-layout" with Webpack Encore.
I try to fix it for many hours but I might not be doing it the right way.
Here is my code :
webpack.config.js
// Same error with or without "autoProvidejQuery"
Encore.autoProvidejQuery();
app.js
import 'jquery';
import 'popper.js';
import 'bootstrap';
import 'isotope-layout';
// start the Stimulus application
import './bootstrap';
custom.js
import jQuery from 'jquery';
import 'isotope-layout';
(function ($) {
// Here is the error :
$(...).isotope({...});
})(jQuery);
Error :
Uncaught TypeError: $(...).isotope is not a function
You don't have to use jQuery when using Isotope. You can use this example from their Webpack documentation:
var Isotope = require('isotope-layout');
var iso = new Isotope( '.grid', {
// options...
});
There is also an example if you want to use jQuery. To install it:
npm install jquery
npm install jquery-bridget
And than:
var $ = require('jquery');
var jQueryBridget = require('jquery-bridget');
var Isotope = require('isotope-layout');
// make Isotope a jQuery plugin
jQueryBridget( 'isotope', Isotope, $ );
// now you can use $().isotope()
$('.grid').isotope({
// options...
});
If you're using modern Javascript (and you're using Webpack, great!), you might not need jQuery in many cases.
I have the following JS in index.js file:
import * as $ from 'jquery';
window.jQuery = $;
$(function () {
$.fn.mapit = function () {
// Do something
}
}
I tried to move the function mapit to another file:
index.js
import * as $ from 'jquery';
window.jQuery = $;
import 'mapit.js'
mapit.js
$(function () {
$.fn.mapit = function () {
// Do something
}
}
But I get an error saying $ is undefined in mapit file.
I am building with webpack and the entry point is index.js
How can I solve this?
You need to reverse your imports. mapit.js is not importing jquery nor does it define it. index.js does.
Perhaps your best course of action is to move jquery to it's own file (jquery.js), import jquery.js into mapit.js, and import mapit.js into index.js
Do an import * as $ from 'jquery'; inside mapit.js too.
That's how modules work in JS, you need to import necessary ones in the file you want to use them in. Its not like traditional <script> tags
I have a React Redux application. Im adding materialize as the CSS framework, but materialize requires jquery. So i installed Jquery and added it to my project via npm. If i import jquery like so
import $ from 'jquery';
No errors are thrown and im able to use it. But only on that component. So i added the wepback plug so i can call $ anymore in my react application. However, when i do this as described on webpacks website, it get the following error.
Line 13: '$' is not defined
Any ideas on why this is ?
app.js
import React from 'react';
import '../styles/index.css';
import Header from './header/Header';
class App extends React.Component {
constructor(props){
super(props);
console.log('Application ready');
}
componentWillMount(){
$('ul.tabs').tabs();
}
render = () => (
<div>
<Header />
<div>
{this.props.children}
</div>
</div>
)
}
export default App;
webpack.config.dev.js
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
jquery: "jquery/src/jquery" // What i added
// $: "jquery/src/jquery"
},
jquery is in the node_modules folder, from the npm install, i didnt add it to any other location.
You've aliased jQuery to the global variable jQuery, not $ - do alias: { $: 'jquery' }.
Wrong, this isn't what alias is for, see https://webpack.js.org/configuration/resolve/
Global variables in (browser) JS are really properties of window. So at the start of your script you could do
import $ from 'jquery';
window.$ = $;
and it'd be available globally after that. Including jQuery in its own <script> tag would do the same thing. But these are both un-webpack, a bit naughty, not modular. The 'correct' thing to do is import $ from 'jquery' in every file where you need it. Yeah this will be tedious if you need it in a lot of places, but it means you know where you need jQuery and where you don't, and if you removed all the components that used jQuery, jQuery would disappear as well.
To add on for Gatsby.js you can npm i jquery and then import jquery in gatsby-browser.js.
import 'jquery/dist/jquery.min';
import 'popper.js/dist/popper.min'; // for navbar animation
import 'bootstrap/dist/js/bootstrap.min';
import $ from 'jquery'; in the relevant files will then detect $
Following the answer to this question I tried to import jQuery using import {$, jQuery} from 'jquery';. and am getting the error Uncaught TypeError: (0 , _jquery.$) is not a function in the browser.
Am using Babel with the ES2015 preset to transpile my Code. If I use two separate imports i.e. import $ from 'jquery'; import jQuery from 'jquery' then it works fine. Why can't I use the combined syntax?
Because import $ from 'jQuery' is short for import {default as $} from 'jQuery'. If you import {$, jQuery}, those are two names that are not exported. You can however use
import {
default as $,
default as jQuery
} from 'jQuery';
I am trying to use velocity together with jQuery (only for IE8 support) in an ES6 module. Consider this code:
import { Component } from 'react';
import ReactDOM from 'react-dom';
import jquery from 'jquery';
import velocity from 'velocity-animate';
export default class ScrollTo extends Component {
render() {...}
scrollToTop() {
velocity(ReactDOM.findDOMNode(this), 'scroll', { container: ReactDOM.findDOMNode(this.props.container) });
}
In IE8 velocity complains it cannot find jQuery. I checked in the source and it looks like velocity looks for jQuery on the window object but I'm importing it as a module.
Is there a way to instantiate/bind velocity with the imported jquery?
you can use ShimPlugin to shim jquery with webpack
see:
https://github.com/webpack/webpack/issues/192
or use ProvidePlugin to expose jquery to window, so that you don't have to import jquery every time you need it.
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
plugin ProvidePlugin This plugin makes a module available as variable
in every module. The module is required only if you use the variable.
Example: Make $ and jQuery available in every module without writing
require("jquery").