React with Webpack + Jquery + bootstrap

Question

I got this error:

bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery

when I try to import bootstrap.js in my project as shown below:

import React from "react";
import ReacrDOM from "react-dom";

import "bootstrap/dist/css/bootstrap.min.css";
import "./assets/css/animate.min.css";
import "./assets/css/light-bootstrap-dashboard.css";
import "./assets/css/demo.css";
import "font-awesome/css/font-awesome.min.css";
import "./assets/css/pe-icon-7-stroke.css";

import $ from "jquery";
import "bootstrap/dist/js/bootstrap.min";
import "./assets/js/bootstrap-checkbox-radio-switch";
import "./assets/js/chartist.min";
import "./assets/js/bootstrap-notify";
import "./assets/js/light-bootstrap-dashboard";
import "./assets/js/demo";

and here is my webpack.config.js

var webpack = require('webpack');
var path = require('path');
var debug = process.env.NODE_ENV !== "production";

module.exports = {
    context: __dirname + "/src",
    devtool: debug ? 'inline-source-map' : null,
    entry: 'index.js',
    output: {
        path: path.join(__dirname, ''),
        filename: 'bundle.js'
    },
    resolve: {
        modules: ['node_modules', 'src'],
        extensions: ['.js']
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loaders: ['babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0,plugins[]=react-html-attrs,plugins[]=transform-class-properties,plugins[]=transform-decorators-legacy']
            },
            {test: /\.css$/, loader: "style-loader!css-loader"},
            {test: /\.less$/, loader: "style-loader!css-loader!less-loader"},
            {test: /\.gif$/, loader: "url-loader?mimetype=image/png"},
            {test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/, loader: "url-loader?mimetype=application/font-woff"},
            {test: /\.(ttf|eot|svg|jpe?g|png|gif)(\?v=[0-9].[0-9].[0-9])?$/, loader: "file-loader?name=[name].[ext]"},
            {
                test: /vendor\/.+\.(jsx|js)$/,
                loader: 'imports?jQuery=jquery,$=jquery,this=>window'
            },
        ]
    },
    plugins: debug ? [] : [
            new webpack.optimize.DedupePlugin(),
            new webpack.optimize.OccurrenceOrderPlugin(),
            new webpack.optimize.UglifyJsPlugin({mangle: false, sourcemap: false}),
            new webpack.optimize.AggressiveMergingPlugin(),
            new webpack.ProvidePlugin({
                $: "jquery",
                jquery: "jquery",
                "window.jQuery": "jquery",
                jQuery: "jquery"
            }),
        ]
};

and here is my package.json:

{
  "name": "learn-react",
  "version": "1.0.0",
  "description": "for learning purpose only",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --content-base --inline --hot --port 3300"
  },
  "keywords": [
    "react",
    "learning"
  ],
  "author": "vidy hermes",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.3.0",
    "redux-devtools-extension": "^2.13.0",
    "redux-logger": "^2.8.1"
  },
  "dependencies": {
    "axios": "^0.15.3",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.22.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "babel-preset-stage-0": "^6.22.0",
    "base-64": "^0.1.0",
    "bootstrap": "^3.3.7",
    "css-loader": "^0.26.2",
    "file-loader": "^0.10.1",
    "font-awesome": "^4.7.0",
    "globalize": "^0.1.1",
    "history": "^4.5.1",
    "imports-loader": "^0.7.1",
    "jquery": "^3.2.1",
    "less": "^2.7.2",
    "less-loader": "^2.2.3",
    "moment": "^2.17.1",
    "path": "^0.12.7",
    "react": "15.4.2",
    "react-dom": "15.4.2",
    "react-redux": "^5.0.2",
    "react-redux-loading-bar": "^2.8.2",
    "react-router": "^3.0.2",
    "react-widgets": "^3.4.6",
    "redux": "^3.6.0",
    "redux-promise-middleware": "^4.2.0",
    "redux-thunk": "^2.2.0",
    "style-loader": "^0.13.2",
    "url-loader": "^0.5.8"
  }
}

try import * from 'jquery' or import jQuery from 'jquery' — ggdx
– ggdx, Commented May 30, 2017 at 9:37

Faris · Accepted Answer · 2017-05-30 13:22:20Z

2

Bootstrap expects jQuery to be available on the global scope, window object in the browser, thus you need to shim it, webpack makes this possible through ProvidePlugin

Quoting their docs

This plugin makes a module available as a variable in every module. The module is required only if you use the variable. Example: Make $ and jQuery available in every module without writing require("jquery").

new webpack.ProvidePlugin({
  $: "jquery",
  jQuery: "jquery",
  "window.jQuery": "jquery"
})

Which you are doing, but only in production builds,

change your webpack's plugins definition to include ProvidePlugin in debug mode as well, you will need it in both envs.

edited May 30, 2017 at 13:22

answered May 30, 2017 at 10:01

Faris

5432 silver badges8 bronze badges

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

4 Comments

vidihermes Over a year ago

i have added this :

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

and still not working.. how to add DefinePlugin?

Faris Over a year ago

i am sorry the definePlugin was a typo i meant to say ProvidePlugin, if this doesn't work, i honestly don't know but consider what @bzekiunat said to use react-bootstrap, or take a look at such solutions

vidihermes Over a year ago

finnaly found the answer, thank you very much, i just add this "jQuery": "jquery" in ProvidePlugin, and everything works fine now... thank you..!!!

nikoss Over a year ago

where do you add this option ?

bzekiunat · Accepted Answer · 2017-05-30 12:24:22Z

1

I highly recommend you to use react-bootstrap instead bootstrap. react-bootstrap doesn't dependent to jquery. It also fits react logic better.

answered May 30, 2017 at 12:24

bzekiunat

697 bronze badges

1 Comment

vidihermes Over a year ago

ok thank you i will try react-boostrap and see what will happen, but i still need jquery, still some other js files dependent to jQuery as this file : import "./assets/js/chartist.min";

Collectives™ on Stack Overflow

React with Webpack + Jquery + bootstrap

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related