CODEWITHSUNDEEP
jqueryjquery-uireactjswebpack
Tom Oakley
Tom Oakley

Reputation: 6403

Using jQuery UI with React.js and Webpack

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).

Upvotes: 2

Views: 2825

Answers (2)

Daniele Cruciani
Daniele Cruciani

Reputation: 623

(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'
  }
}

Upvotes: 2

Piyush.kapoor
Piyush.kapoor

Reputation: 6803

Use imports-loader

npm install --save-dev imports-loader

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

import "jquery-ui";

Upvotes: 0

Related Questions