jquery-ui and webpack, how to manage it into module?

Question

any idea how to deal with that ? I mean jquery-ui seems not to be amd and I don't know how to manage that , any idea ?

score 97 · Answer 1 · answered Feb 26 '17 at 05:55

97

jquery-ui-dist and jquery-ui-bundle do not seem to be maintained by the jquery-ui team. After jquery-ui v1.12 Its possible to use the official jquery-ui package from npm with webpack.

Update jquery-ui to 1.12 by updating package.json and npm install.

Then you can require each widget like this.

require("jquery-ui/ui/widgets/autocomplete");
require("jquery-ui/ui/widgets/draggable");

If you have used require("jquery-ui") before you need to replace it with separate imports for each widget. I think the new way is better because it will bundle only the code for the widget we need to use.

See documentation on using the 1.12 official npm package.

answered Feb 26 '17 at 05:55

Aruna Herath

6,241
1
40
59

2

this answer helped me the most, but mine still didn't work until I had it dynamically loaded. it couldn't be required during compile time, because the draggable widget kept looking for a jQuery object. (not global.jQuery or window.jQuery). so i had it required after the page load – Lioness Apr 13 '17 at 07:31
@NnennaUde does adding `require('jquery');` before `require("jquery-ui/ui/widgets/draggable");` work? – Aruna Herath Apr 13 '17 at 12:09
2

No, that wasn't the problem. Anyway, since then, I have been able to get it to work. It's still a mystery what the problem actually was. However, I did have issues getting it to work in a jsdom testing environment. That same error was showing up again. `$.widget( "ui.draggable", $.ui.mouse, { TypeError: Cannot read property 'mouse' of undefined` However, I was able to fix it by requiring all its dependencies as follows: `require('jquery-ui/ui/version'); require('jquery-ui/ui/plugin'); require('jquery-ui/ui/widget'); require('jquery-ui/ui/widgets/mouse')`; – Lioness Apr 18 '17 at 12:14
3

So bitter about how hard it is to find documentation for NPM installation instructions on JQuery-UI. I can't wait until the day I can murder this library from my current project! – ecbrodie Sep 05 '19 at 19:38
how to include css files of autocomplete ? – Vijay Meena Feb 21 '20 at 12:10
This is the correct answer, man, why it was so hard to find? – Daniel Angel Dec 07 '20 at 23:21
ikr? I guess most the people who still use jquery-ui, use it from the cdn instead of bundling? so jquery-ui people pay little attention to bundling. – Aruna Herath Dec 08 '20 at 00:49
where do the require statements go? in webpack.config.js? app.js? somewhere else? – dfrankow Sep 15 '21 at 21:32
Also, shouldn't we prefer "import" as of ES2015? https://insights.untapt.com/webpack-import-require-and-you-3fd7f5ea93c0 – dfrankow Sep 15 '21 at 21:36

score 89 · Answer 2 · edited Oct 30 '17 at 12:19

89

For some reason jquery-ui didn't play nice with webpack. I had to require jquery-ui-bundle instead.

npm i -S jquery-ui-bundle

and then require it after jquery e.g.

require('jquery');
require('jquery-ui-bundle');

edited Oct 30 '17 at 12:19

Ondrej Slinták

31,386
20
94
126

answered Aug 30 '16 at 14:19

KhaledMohamedP

5,000
3
28
26

11

Thank you. Saved me so much headache. Seems the jquery-ui package doesn't contain a ready build jquery-ui.js file :/ – Sámal Rasmussen Sep 06 '16 at 15:51
this worked for my electron app deployment as well. Thanks! – UltrasoundJelly Mar 25 '17 at 02:46
2

Can you please extend your answer with a working example of `webpack.config.js` with jquery and `jquery-ui`? – Thomas Szteliga Jun 18 '17 at 00:48
`jquery-ui` now works nice with webpack. See my answer. – Aruna Herath Jun 20 '17 at 06:35
I spent hours trying to figure out why jquery-ui throws errors during vanilla js migration to Create React App... This answer made my day!! – Marius B Jun 28 '18 at 11:16

score 51 · Accepted Answer · edited Mar 01 '18 at 13:24

51

youre in luck I did this just that yesterday, it's rather easy.

npm install --save jquery jquery-ui

Make sure that you have jquery aliased to resolve with the plugin in the webpack.config.js

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

Then include two aliases in the webpack.config.js

The node_modules folder
The jquery-ui folder

``````

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

Make sure that jquery gets loaded first in your app startup file.

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

If you need to use a theme configure the css-loader and the file-loader. Don't forget to npm install those loaders.

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

And use in your app startup file.

require("modules/jquery-ui/themes/black-tie/jquery-ui.css");
require("modules/jquery-ui/themes/black-tie/jquery-ui.theme.css");

edited Mar 01 '18 at 13:24

Liam

27,717
28
128
190

answered Nov 30 '15 at 16:42

wendellmva

1,896
1
26
33

2

What's the app startup file? If you initialize $ there, how can you make it global for all your files? – e18r Aug 10 '16 at 02:07
11

Are you using npm? jquery-ui.js doesn't come with it – e18r Aug 10 '16 at 02:12
1

The startup file is the file when you do node app.js, the entry file of your app. When you use provide plugin, that's how you make it global for any file processed by webpack. For all the other files you just require it. Yes, I am using npm you need to require jquery and jquery-ui and all the others like webpack and the loaders you use before this solution works. – wendellmva Aug 10 '16 at 14:28
The answer below is only for when using the bundle and not appropriate when you npm install jQuery because that way you don't get the bundle but the package! – wendellmva Jan 15 '18 at 04:02
1

@WendellMuntslag I just had to add new webpack.ProvidePlugin({ "$":"jquery", "jQuery":"jquery", "window.jQuery":"jquery" }), to my webpack.config.js. Did need the alias. It worked. Thanks. – Will Mar 25 '18 at 20:28
@FrancoisRichard This should not be the accepted would consider changing to what is now the correct answer, ABH's answer – Brian Ogden Sep 25 '18 at 21:31
why would you have to "Make sure that jquery gets loaded first in your app startup file"? Isn't the whole point of ProvidePlugin that you don't have to do this? Description is "Automatically load modules instead of having to import or require them everywhere." – user210757 Oct 11 '18 at 16:26

Stanley Shauro · Answer 4 · 2018-07-07T10:20:07.867

webpack-jquery-ui

webpack-jquery-ui - use this plugin, e.g. if you use Rails 5, run

 yarn add webpack-jquery-ui

When jQuery UI plugin starts, it checks if jquery provided, so

Add this code to your webpacker configuration file (shared.js - if you use it with Rails 5)

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

Add these lines into your app code.

require('webpack-jquery-ui');
require('webpack-jquery-ui/css');

to fix ActionController::InvalidAuthenticityToken in jquery.ajax

You have to pass an authenticity_token parameter with all your PUT, POST and DELETE requests.

To do that you can usually fetch it from the header with $('[name="csrf-token"]')[0].content

So your request would look something like:

var that = this;
$.ajax({
  url: navigator_item.url,
  data: { authenticity_token: $('[name="csrf-token"]')[0].content},
  method: 'DELETE',
  success: function(res) {
   ...
  }
});

I include jQuery into my application in another way

Instead of using:

plugins: [
new webpack.ProvidePlugin({...

You should add 'jquery': 'jquery/src/jquery' to aliases in the webpack config file:

module.exports = {
  resolve: {
    alias: {
        'jquery': 'jquery/src/jquery'
    }
  }

It will provide module name 'jquery'. jQuery UI checks this name on init.

Then in you app.js file you write:

import $ from 'jquery'

import 'webpack-jquery-ui/css'
import 'webpack-jquery-ui/sortable' // if you need only sortable widget.

window.jQuery = $;
window.$ = $; // lazy fix if you want to use jQuery in your inline scripts.

Thanks, Stanley! Your second solution with adding an alias did work for me — Anton Koning, Aug 14 '17 at 10:25

chrBrd · Answer 5 · 2017-01-07T02:45:42.647

The accepted answer doesn't work for me as the jQuery-ui package on NPM isn't pre-built and therefore doesn't contain jquery-ui.js; the package will either need built before use or all the widgets included/used individually.

Quickest way I got the whole package working was by first downloading the distributable version:

npm install jquery-ui-dist --save

I needed to add an alias for jquery-ui-dist to avoid a 'Cannot find module' error (using just require('jquery-ui-dist') won't work, because the .js filename is different), by adding this to webpack.config.js:

resolve: {
    alias: {
        'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
    }
},

Finally, you can use this in the .js file where the modules are loaded:

var jQuery = require('jquery');
require('jquery-ui');

Alternatively, you can avoid having to require the scripts when loading the modules, and having to declare jQuery as a variable, by using ProvidePlugin in your webpack.config.js:

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

I can't make it work. Using webpack.ProvidePlugin it exposes correctly "jQuery" and "$" variables to the window, but without "jquery-ui" addons. If I console.log($.ui) it gives undefined. @chrBrd any idea? Which version of webpack you used? — Simone Mazzoni, Apr 11 '17 at 12:56
It would have been version 1.x?? - whatever was current when I wrote the answer. Does it work if you use `require` instead of ProvidePlugin? — chrBrd, Apr 12 '17 at 13:53
You can use `require('jquery-ui-dist/jquery-ui.js');` instead of the alias. — raphael, Jul 27 '17 at 18:34

score 4 · Answer 6 · answered Nov 22 '18 at 22:50

The steps that worked for me (in a Rails 5.1.6 project) aren't identical to any of the above:

Install jquery and jquery-ui: yarn add jquery and yarn add jquery-ui

Add the following to the webpack config (i.e. in /config/webpack/environment.js) to globally set $ and jquery and jQuery:

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery'
  })
)

Require whichever individual jquery-ui package(s) you want, at the top of your pack (e.g at the top of /javascript/packs/application.js:

require("jquery-ui/ui/widgets/sortable")

Then you can call, for example, $('.selector').sortable() anywhere in your pack.

score 4 · Answer 7 · answered Apr 23 '20 at 11:05

4

add jquery in your node_modules using;

npm install --save jquery jquery-ui

and add externals in your webpack.config.js like;

...

  externals: {
// require("jquery") is external and available
//  on the global var jQuery
"jquery": "jQuery",
"jquery-ui": "jquery-ui/jquery-ui.js", 
}

it worked for me

answered Apr 23 '20 at 11:05

GameChanger

378
5
16

strange adding jquery to external it worked – Noman Chali Jun 29 '22 at 10:34

score 2 · Answer 8 · answered Oct 30 '21 at 04:59

You should import all of these and check which ones you really need.

require('jquery-ui/ui/core.js');
require('jquery-ui/ui/data.js');
require('jquery-ui/ui/form.js');
require('jquery-ui/ui/form-reset-mixin.js');
require('jquery-ui/ui/focusable.js');
require('jquery-ui/ui/disable-selection.js');
require('jquery-ui/ui/plugin.js');
require('jquery-ui/ui/labels.js');
require('jquery-ui/ui/position.js');
require('jquery-ui/ui/scroll-parent.js');
require('jquery-ui/ui/tabbable.js');
require('jquery-ui/ui/unique-id.js');
require('jquery-ui/ui/widget.js');
require('jquery-ui/ui/widgets/accordion.js');
require('jquery-ui/ui/widgets/autocomplete.js');
require('jquery-ui/ui/widgets/button.js');
require('jquery-ui/ui/widgets/checkboxradio.js');
require('jquery-ui/ui/widgets/controlgroup.js');
require('jquery-ui/ui/widgets/datepicker.js');
require('jquery-ui/ui/widgets/dialog.js');
require('jquery-ui/ui/widgets/draggable.js');
require('jquery-ui/ui/widgets/droppable.js');
require('jquery-ui/ui/widgets/menu.js');
require('jquery-ui/ui/widgets/mouse.js');
require('jquery-ui/ui/widgets/progressbar.js');
require('jquery-ui/ui/widgets/resizable.js');
require('jquery-ui/ui/widgets/selectable.js');
require('jquery-ui/ui/widgets/selectmenu.js');
require('jquery-ui/ui/widgets/slider.js');
require('jquery-ui/ui/widgets/sortable.js');
require('jquery-ui/ui/widgets/spinner.js');
require('jquery-ui/ui/widgets/tabs.js');
require('jquery-ui/ui/widgets/tooltip.js');
require('jquery-ui/ui/effect.js');
require('jquery-ui/ui/effects/effect-blind.js');
require('jquery-ui/ui/effects/effect-bounce.js');
require('jquery-ui/ui/effects/effect-clip.js');
require('jquery-ui/ui/effects/effect-drop.js');
require('jquery-ui/ui/effects/effect-explode.js');
require('jquery-ui/ui/effects/effect-fade.js');
require('jquery-ui/ui/effects/effect-fold.js');
require('jquery-ui/ui/effects/effect-highlight.js');
require('jquery-ui/ui/effects/effect-puff.js');
require('jquery-ui/ui/effects/effect-pulsate.js');
require('jquery-ui/ui/effects/effect-scale.js');
require('jquery-ui/ui/effects/effect-shake.js');
require('jquery-ui/ui/effects/effect-size.js');
require('jquery-ui/ui/effects/effect-slide.js');
require('jquery-ui/ui/effects/effect-transfer.js');
require('jquery-ui/ui/vendor/jquery-color/jquery.color.js');

jquery-ui and webpack, how to manage it into module?

8 Answers8

webpack-jquery-ui

I include jQuery into my application in another way

Linked