title: React with Webpack + Jquery + bootstrap
body: <p>I got this error:</p>
  
  <blockquote>
    <p>bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires
    jQuery</p>
  </blockquote>
  
  <p>when I try to import bootstrap.js in my project as shown below:</p>
  
  <pre><code>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";
  </code></pre>
  
  <p>and here is my webpack.config.js</p>
  
  <pre><code>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=&gt;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"
              }),
          ]
  };
  </code></pre>
  
  <p>and here is my package.json:</p>
  
  <pre><code>{
    "name": "learn-react",
    "version": "1.0.0",
    "description": "for learning purpose only",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; 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"
    }
  }
  </code></pre>