JQuery UI $ (...). sortable is not a function with webpack

Question

I believe everything is set up correctly, but I am getting a strange problem with Webpack.

Consider this simple app.ts file:

 'use strict'; import $ = require('jquery'); import 'jquery-ui'; $(function() { $( "#sortable" ).sortable(); }); 

Everything compiles fine, but when the site starts up, it complains that Uncaught TypeError: $(...).sortable is not a function . ( sortable is a jQuery user interface function).

Everything works fine when I instead refer to the jQuery and jQuery version that supports CDN, but it does not work when I use JS modules and Webpack. Why is this?

Why is jQueryUI sortable() function not recognized?

Answer 1

The problem is that the jQuery user interface usually automatically extracts the components it needs (which is why it works when it is connected via CDN), but it does not work when importing as a module (for example, in Webpack).

Fortunately, starting with jQuery UI 1.11, you can manually use any additional components that you need:

 'use strict'; import $ = require('jquery'); require('jquery-ui'); require('jquery-ui/ui/widgets/sortable'); require('jquery-ui/ui/disable-selection'); 

and etc.

Here is some official documentation explaining this further.

Answer 2

you are using the wrong ES6 import syntax, but it still doesn't work if it's right. sortable not recognized because $ not available inside the jquery-ui module.

This solution is not optimized because you are importing whole jquery-ui .

npm install --save jquery-ui-bundle

index.js

 'use strict'; import 'jquery-ui-bundle'; $(function() { $( "#sortable" ).sortable(); }); 

Webpack

  plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', 'window.$': 'jquery' }) ] 

Answer 3

This answer is just a summary of two useful answers: Answer 1 , Answer 2

First, it’s best to know that the jquery-ui-dist and jquery-ui-bundle commands are not supported by the jquery-ui command. Therefore, you probably want to avoid using it. However, from jquery-ui version 1.11 you can require / import AMD, and from version 1.12 you can use the official package with npm.

Solution 1:
The preferred way is to import the jquery-ui part, for example:

 import 'jquery-ui/ui/widgets/draggable'; 

The only drawback is that if you previously used import 'jquery-ui' , now you need to import all the modules that you want to use specifically. But this is better because it will only bind the import that you really need.

Check the 1.11 AMD support documentation and the 1.12 npm documentation on your site.

Solution 2:
But if for any reason you want to use one global jquery-ui import, you will have to adapt the configuration of your web package:

First, make sure webpack knows about jquery aliases:

 ... plugins: [ new webpack.ProvidePlugin({ '$':'jquery', 'jQuery':'jquery', 'window.jQuery':'jquery', 'global.jQuery': 'jquery' }), ... 

Next, help webpack resolve jquery-ui js location:

 resolve : { alias: { // bind version of jquery-ui "jquery-ui": "jquery-ui/jquery-ui.js", // bind to modules; modules: path.join(__dirname, "node_modules"), 

Then make sure jquery-ui is loaded as soon as possible (perhaps at startup time?)

 var $ = require("jquery"), require("jquery-ui"); 

If you want to use the theme with jquery-ui, you will have to configure the css loader and file loader accordingly. (Remember to install these bootloaders):

 module: { loaders: [ { test: /\.css$/, loader: "style!css" }, { test: /\.(jpe?g|png|gif)$/i, loader:"file" }, 

And below you import jquery and jquery-ui just add:

 import 'modules/jquery-ui/themes/black-tie/jquery-ui.css'; import 'modules/jquery-ui/themes/black-tie/jquery-ui.theme.css';