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.