Using jQuery UI with React.js and Webpack

Question

I'm trying to use jQuery UI to generate a Slider, within a React.js application. This is basically the only place I'm using jQuery UI, so I don't want to simply import jQuery UI in the <head> of the application and have it loaded on pages where it will not be used.

With this in mind, I have installed jQuery and jQuery UI from npm (npm install jquery jquery-ui --save). I am then importing these into the file where the slider component is rendered:

import $ from 'jquery'
import {slider} from 'jquery-ui'

When I build this, the Terminal has a load of errors saying TypeError: $.extend is not a function. This error comes from node_modules/jquery-ui/jquery-ui.js. When I remove the jquery-ui import, these go away (but obviously the slider no longer works).

When I include jQuery and jQuery UI in the <head> as two <script> files, it works flawlessly with no errors. But as explained above I don't want to do this as they will both be very rarely used.

I think this is down to Webpack not understand $ from jQuery (and maybe more) but I do not know enough about Webpack to fix it. I found this but would appreciate any advice on which of those options from the accepted answer to implement (if this is the cause of my error above). Thanks for any advice or help with this.

EDIT: I am using erikras's React boilerplate, so my webpack config file looks essentially the same as this. I have added

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

to the bottom of the Plugins: [] array but it still gives the same error. I have also tried adding the imports-loader code

{ 
  test: /vendor\/.+\.(jsx|js)$/,
  loader: 'imports?jQuery=jquery,$=jquery,this=>window'
}

but this seemingly had no effect either. I have added both these to dev.config.js and prod.config.js. I am using npm run dev to start the server on my local machine (Mac OS X).

also have a look at https://stackoverflow.com/a/38755491/250970 it also refers to stylesheets — Daniele Cruciani, Sep 20 '17 at 18:19

score 2 · Answer 1 · answered Sep 20 '17 at 18:14

(I know it is an old question, but I think it needs to be answeared clearly anyway)

I use this for importing sortable:

import $ from 'jquery'
import sortable from 'jquery-ui/ui/widgets/sortable'

so I guess for importing slider:

import $ from 'jquery'
import slider from 'jquery-ui/ui/widgets/slider'

also webpack requires 'loader' part to be included in imports-loader starting from same version (3 maybe, I am using that):

{
  test: /jquery-ui\/.+\.js$/,
  use: {
    loader: 'imports-loader?jQuery=jquery,$=jquery,this=>window'
  }
}

score 0 · Answer 2 · answered Jul 05 '16 at 16:41

0

Use imports-loader

npm install --save-dev imports-loader

{ test: /vendor\/.+\.(jsx|js)$/,
  loader: 'imports?jQuery=jquery,$=jquery,this=>window'
}

import "jquery-ui";

answered Jul 05 '16 at 16:41

Piyush.kapoor

6,715
1
21
21

Hi Piyush, thanks! Will try this when I'm next at my laptop (left work right now). – Tom Oakley Jul 05 '16 at 16:54
This didn't work unfortunately :( still the same error. I changed the vendor bit in test to `node_modules`, as that is where jQuery UI is located, with no luck. Also removed that altogether but still didn't work. – Tom Oakley Jul 05 '16 at 18:12

Using jQuery UI with React.js and Webpack

2 Answers2