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 \'r         


        

Answer 1

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

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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"
       })
    ]
};

Answer 6

This will work!

global.jQuery = require('jquery');

instead of

import $ from 'jquery';