import jQuery-ui and jQuery with npm install
Using with webpack.
import $ from 'jquery'
pass jquery module default property to $, so that you can use $ as a local variable in your current module. However jquery-ui only supports amd, so when you use import
, it will use global jQuery
as $ inside and run a function in the constructor of the module (you can look into its source code).
So what to do? Make jQuery
as a global variable.
My way using webpack:
1 only import the module which you want to use
import 'jquery-ui/ui/widgets/datepicker'
import 'jquery-ui/themes/base/core.css'
import 'jquery-ui/themes/base/datepicker.css'
import 'jquery-ui/themes/base/theme.css'
2 webpack config
{
plugins: [
new webpack.ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery',
'windows.jQuery': 'jquery',
}),
],
}
ProvidePlugin provide a way to make variables to be global variables. So after you use ProvidePlugin, here $
jQuery
window.jQuery
can be used directly in a module even you have no import $ from 'jquery'
.
ProvidePlugin: Automatically load modules instead of having to import or require them everywhere.
However, if you do not use webpack, just remember that you should provide a global variable jQuery
. For example:
import $ from 'jquery'
window.jQuery = $
put this code in your entry code. It is dependent on what compile system you are using.
For anyone using the parcel.js bundler, all the standard suggestions/solutions wont work if you use import
:
For example:
//
import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
import "jquery-ui-bundle";
// or something like, as suggested/standard
import $ from 'jquery';
window.$ = window.jQuery = $;
import 'jquery-ui/themes/base/core.css';
import 'jquery-ui/themes/base/theme.css';
import 'jquery-ui/themes/base/selectable.css';
import 'jquery-ui/ui/widgets/selectable';
wont seem to work, with error jQuery is undefined, since the library that depends on jQuery does so in a sync way, and because parceljs ends up generating the following:
"use strict";
var _ = _interopRequireDefault(require("jquery"));
require("jquery-ui-bundle");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
window.$ = window.jQuery = _.default;
assigning jQuery on window happens too late.
The fix is to use require
over import
(simple but not obvious)
const $ = require("jquery");
window.$ = window.jQuery = $;
require("jquery-ui-bundle");
then parceljs will generate, which will then work
var $ = require("jquery");
window.$ = window.jQuery = $;
require("jquery-ui-bundle");
Just tried updating jquery (to 3.1.0) & jquery-ui (to 1.12.0) and got the very same error.
Newer versions of jquery-ui seems to require a global jQuery
variable to initialize or newer versions of jquery does not set the jQuery
global variable by default anymore, hence the Uncaught ReferenceError.
A clear solution is to set global.jQuery = require('jquery')
before importing jquery-ui.
It does not seem to work for browserify though, since browserify prioritizes imports over other expressions (imports are placed on top of the browserified code even if they were placed behind other expressions in the original code).
So if you're using browserify, try jquery@2.2.4 and jquery-ui@1.10.5, then import as:
import $ from 'jquery';
import 'jquery-ui';
Worked for me.