Webpack using bootstrap - jquery is not defined

Question

import $ from 'jquery';
require("./node_modules/bootstrap/dist/css/bootstrap.min.css")
require("./node_modules/bootstrap/js/dropdown.js")
import React from 'react';
import ReactDOM from 'react-dom';
var _ = require('lodash');

Please refer above my setting . Some reason I've got error saying "Uncaught ReferenceError: jQuery is not defined() from dropdown.js

I also included the following lines at webpack.config.js

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

But, No luck - Still having jQuery undefined error. Any idea ? Can someone help this issue please?

Many thanks

https://github.com/AngularClass/angular-starter/issues/696 MurhafSousli good answer — zloctb, Sep 12 '17 at 11:48

score 115 · Accepted Answer · answered Sep 02 '16 at 02:48

115

please use webpack ProviderPlugin, use global is not a good idea.

// webpack.config.js
module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin({
           $: "jquery",
           jQuery: "jquery"
       })
    ]
};

answered Sep 02 '16 at 02:48

xushao

1,166
1
8
3

1

Thanks. Just saved me from doing `window.jQuery = require('jquery')` – Marcel Oct 20 '16 at 18:20
4

doesn't it load jquery everywhere ? Is there a way to set up jQuery only when doing an `import 'jquery'` ? – Eric Burel Feb 17 '17 at 08:41
I just can't get this to work with VS.net 2017 and WebPack 2...even restarted the whole machine once to be absolutely sure node restarted. A coworker doing an unrelated Aurelia prototype had the same exact issue with vs 2017 and webpack 2 as well, and this didn't work for him either, so he ended up having to hack around it. – Michael Jul 14 '17 at 14:35

score 25 · Answer 2 · answered Jun 27 '16 at 13:19

25

This will work!

global.jQuery = require('jquery');

instead of

import $ from 'jquery';

answered Jun 27 '16 at 13:19

Bhargav Ponnapalli

9,224
7
36
45

this is the only way I got jQuery working as dependency for Kendo UI. Thank you – mJay Apr 24 '17 at 14:20
Didn't work for me. The one above has worked, though: http://stackoverflow.com/a/39283602/541961 – Dmytro Apr 29 '17 at 20:44
it is much better to use ProvidePlugin – taras May 19 '17 at 13:02
@Taras : Perhaps, but this worked for me back then and it continues to help a few people today with peculiar cases. :) – Bhargav Ponnapalli May 19 '17 at 14:26
1

Thank you. This worked for me after trying out a lot of other things in Laravel mix. – Lamin Barrow Dec 18 '17 at 11:50
1

Could Jquery BE any harder to get to work with webpack? No. No it couldn't if it tried. I had to work though every solution on this page until I got to this one. – russellmania Jan 13 '18 at 01:59
I'm using create-react-app, this solution works perfectly for me! Before this, I tried to load jquery with – Zhiyong Oct 12 '19 at 02:24

Sergiu Dogotaru · Answer 3 · 2017-02-22T07:07:16.697

19

global.jQuery did not work for me. But I found an interesting read here: http://reactkungfu.com/2015/10/integrating-jquery-chosen-with-webpack-using-imports-loader/

The basic idea is to use webpacks 'imports-loader'. Notice, though, that it's not installed by default, so first thing install (npm install --save imports-loader). And in webpack.config add to your loaders the following:

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

After that just import jquery and bootstrap, or some other plugins extending on 'jQuery', as usually.

regards

edited Feb 22 '17 at 07:07

answered Jun 29 '16 at 15:08

Sergiu Dogotaru

395
1
7

3

Works. But I had to set the loader to 'import-loader' Like : { test: /bootstrap.+\.(jsx|js)$/, loader: 'imports-loader?jQuery=jquery,$=jquery,this=>window' } – Ramp Jan 11 '17 at 21:19
1

Did you mean to link back to this question, or to something else? – Sean the Bean Feb 17 '17 at 19:21
1

@sean-the-bean definitely didn't want to link back to this question, thanks for pointing that out. I've edited the post ant corrected the link. – Sergiu Dogotaru Feb 22 '17 at 07:09

score 8 · Answer 4 · answered Jul 05 '17 at 01:23

8

In order for this code to work you must RESTART Node after the change:

// webpack.config.js
module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin({
           $: "jquery",
           jQuery: "jquery"
       })
    ]
};

answered Jul 05 '17 at 01:23

Ro.

1,525
1
14
17

score 6 · Answer 5 · answered Jul 19 '17 at 10:06

As mentioned by @Ro don't forget to restart the node server, the changes to the webpack will otherwise not be taken into account.

I confirm that once these lines added and the server restarted the error vanishes.

With Bootstrap 4 an updated version of the webpack.config.js will look actually like this because of its dependency with Tether:

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

Salticus · Answer 6 · 2018-04-22T01:23:43.227

Install and use exports-loader for individual Dropdown imports with Bootstrap 4.0 and Webpack 3.

// webpack.config.js
module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin({
           Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
       })

Plugin or Individual import: require("./node_modules/bootstrap/js/dist/dropdown")

versus

Importing Bootstrap in its entirety:require("./node_modules/bootstrap")

References

the Bootstrap 4.0 note on importing individual Bootstrap plugins with webpack
xushao's answer
Bhavyanshu Parasher's blog

score 0 · Answer 7 · edited Jan 12 '18 at 08:58

0

this will work

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

It worked for me hope it helps

edited Jan 12 '18 at 08:58

Can PERK

590
8
24

answered Sep 13 '17 at 15:29

Jason Nelligan

1
2

Miss: const webpack = require("webpack"); – Juan Ignacio Barisich Jan 14 '21 at 18:50

Webpack using bootstrap - jquery is not defined

7 Answers7

Linked