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

Solution 1:

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.

Solution 2:

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

Solution 3:

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

1. The node_modules folder
2. 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");

Solution 4:

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.