import jQuery-ui and jQuery with npm install

Question

Somewhat new to npm here..

I'd like to use jQuery-ui in my project. I'm used to importing both jQuery and jQuery-ui with a script tag in my HTML, but I would like to import both using npm install.

I got jQuery working with.

import $ from 'jquery'

But whenever I try to import jquery-ui I get this error:

Uncaught ReferenceError: jQuery is not defined

There's a lot of posts about this error. But all of them seem to be centered around people just putting their script tags for jQuery and jQuery-ui in the wrong order.

I can't find anything on how to install both jQuery and jQuery-ui with npm install?

Any ideas?

Answer 1

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.

Answer 2

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.