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");