与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"
  }
}

Answer 1

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.

Answer 2

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