Using Jquery and Bootstrap with Es6 Import for React App

Question

Hello I am trying to include jquery and bootstrap into a Reactjs project, but I am using es6 imports to do so. I've included the imports as shown below in my index.js file. But upon page load it gives error saying that Bootstrap's Javascript requires jquery. I've already npm installed all the required packages. How can I get jquery into my bundled and minified final script file?

import $ from 'jquery';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/bootstrap/dist/js/bootstrap.min.js';

Answer 1

Found the answer on this site here

Step 1: Install both jquery and bootstrap

npm install jquery bootstrap --save

Step 2: Import them in vendor.ts:

import 'jquery';
import 'bootstrap/dist/js/bootstrap';

Step 3: Go to wepback.common.js in config directory and add this inside plugin section:

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

This will let bootstrap to find jquery

As mentioned here you can not depend on ES6 respecting the order of your import statements

Answer 2

For some reason jquery needs to be defined in lowercase too

import jQuery from 'jquery'
global.jQuery = jQuery
global.jquery = jQuery // jquery lowercase  was the solution
global.$ = jQuery
let Bootstrap = require('bootstrap')
import 'bootstrap/dist/css/bootstrap.css'

Answer 3

window.$ = window.jQuery = require('jquery');

You can use Gulp and webpack to minify your files

Answer 4

Testing with this

import jquery from 'jquery'

window.jQuery = jquery

require('bootstrap')

Answer 5

After import all style css file add the below code in your index.js file

window.jQuery = window.$ = require('jquery/dist/jquery.min.js');
require('bootstrap/dist/js/bootstrap.min.js');