Webpack using bootstrap - jquery is not defined

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

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

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

This will work!

global.jQuery = require('jquery');

instead of

import $ from 'jquery';

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

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

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

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

this will work

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

It worked for me hope it helps