React With Webpack + Jquery + Bootstrap

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

Solution 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.

Solution 2:

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