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

github.com/AngularClass/angular-starter/issues/696 MurhafSousli good answer — zloctb
– zloctb, Commented Sep 12, 2017 at 11:48

xushao · Accepted Answer · 2016-09-02 02:48:17Z

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 2, 2016 at 2:48

xushao

1,1661 gold badge8 silver badges3 bronze badges

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

3 Comments

Marcel Over a year ago

Thanks. Just saved me from doing window.jQuery = require('jquery')

Eric Burel Over a year ago

doesn't it load jquery everywhere ? Is there a way to set up jQuery only when doing an import 'jquery' ?

Michael Over a year ago

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.

Bhargav Ponnapalli · Accepted Answer · 2016-06-27 13:19:03Z

25

This will work!

global.jQuery = require('jquery');

instead of

import $ from 'jquery';

answered Jun 27, 2016 at 13:19

Bhargav Ponnapalli

9,4427 gold badges38 silver badges45 bronze badges

7 Comments

mJay Over a year ago

this is the only way I got jQuery working as dependency for Kendo UI. Thank you

Dmytro Over a year ago

Didn't work for me. The one above has worked, though: stackoverflow.com/a/39283602/541961

taras Over a year ago

it is much better to use ProvidePlugin

Lamin Barrow Over a year ago

Thank you. This worked for me after trying out a lot of other things in Laravel mix.

russellmania Over a year ago

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.

|

Sergiu Dogotaru · Accepted Answer · 2017-02-22 07:07:16Z

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, 2017 at 7:07

answered Jun 29, 2016 at 15:08

Sergiu Dogotaru

3951 silver badge7 bronze badges

3 Comments

Ramp Over a year ago

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

Sean the Bean Over a year ago

Did you mean to link back to this question, or to something else?

Sergiu Dogotaru Over a year ago

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

Ro. · Accepted Answer · 2017-07-05 01:23:45Z

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 5, 2017 at 1:23

Ro.

1,8011 gold badge19 silver badges17 bronze badges

Comments

Stf_F · Accepted Answer · 2017-07-19 10:06:53Z

6

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',
}),
]

answered Jul 19, 2017 at 10:06

Stf_F

1,1941 gold badge10 silver badges30 bronze badges

Comments

Salticus · Accepted Answer · 2018-04-22 01:23:43Z

4

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

edited Apr 22, 2018 at 1:23

answered Apr 22, 2018 at 1:04

Salticus

4034 silver badges9 bronze badges

Comments

Can PERK · Accepted Answer · 2018-01-12 08:58:27Z

0

this will work

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

It worked for me hope it helps

edited Jan 12, 2018 at 8:58

Can PERK

63010 silver badges26 bronze badges

answered Sep 13, 2017 at 15:29

Jason Nelligan

12 bronze badges

1 Comment

Juan Ignacio Barisich Over a year ago

Miss: const webpack = require("webpack");

Collectives™ on Stack Overflow

Webpack using bootstrap - jquery is not defined

7 Answers 7

3 Comments

7 Comments

3 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

7 Comments

3 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related