How to use a jQuery dependent node module in React.js?

Question

I want to use this library in my React application: http://propeller.in, but it's built on jQuery. I have added the following relevant code in my Index.js React component:

import $ from 'jquery';
import 'propellerkit/dist/js/propeller.js';

I've also tried this:

import 'jquery/dist/js/jquery.js';
import 'propellerkit/dist/js/propeller.js';

I've made sure both node modules are installed. For some reason, I keep getting a $ is not defined error.

You can try import * as $ from 'jquery'; but since I did not I didn't find it worthy of a top level answer. — bcr
– bcr, Commented Aug 15, 2017 at 13:27
Did you try import * as $ from 'jquery/dist/js/jquery.js'; or just import 'jquery';? That should expose jQuery as a "global" in the dist webpack creates. — bcr
– bcr, Commented Aug 15, 2017 at 13:31

Anurag Awasthi · Accepted Answer · 2017-08-15 13:32:58Z

1

If you are using webpack to bundle, you can provide jquery using ProvidePlugin,

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'   // this will try to find node jquery module
})

Link to docs

answered Aug 15, 2017 at 13:32

Anurag Awasthi

6,2532 gold badges21 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Abdullah Hamzic Over a year ago

Perfect. Thanks!

Muhammad Usama Mashkoor Over a year ago

can you let me know how can I add a plugin in web pack in create react app...?

Collectives™ on Stack Overflow

How to use a jQuery dependent node module in React.js?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related