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

score 24 · Accepted Answer · edited May 23 '17 at 12:34

24

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

edited May 23 '17 at 12:34

Community

1
1

answered Nov 12 '16 at 01:34

David Choi

6,131
10
28
28

ty for the important info @David ! – João Pereira Jan 27 '17 at 17:44
@david I am creating a new project using CLI create-react-app. Can you tell how and where to import in it? There is no config directory in the project created by create-react-app. – Climb Tree Jul 12 '17 at 05:58
If you want to use this with create-react-app either set jquery on the window object yourself (like the next answer suggests) or `npm run/yarn eject` and then you'll find webpack config files under `config/` where you can add these dependencies – Sebastian Aug 15 '17 at 22:04
`import 'jquery'; import 'bootstrap/dist/js/bootstrap';` its worked for me – iamtheasad May 11 '20 at 10:14

Med · Answer 2 · 2016-10-27T15:42:37.513

2

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

You can use Gulp and webpack to minify your files

edited Oct 27 '16 at 15:42

answered Oct 27 '16 at 15:33

Med

2,772
1
11
14

Not looking to use a different importer. I'm currently using es6 imports, webpack, and babel for bundling minification. And I'd like to keep it that way. – David Choi Oct 27 '16 at 17:53

score 2 · Answer 3 · edited Sep 14 '17 at 21:55

2

Testing with this

import jquery from 'jquery'

window.jQuery = jquery

require('bootstrap')

edited Sep 14 '17 at 21:55

Andre Figueiredo

12,930
8
48
74

answered May 07 '17 at 08:07

Christian Irack

59
1

score 1 · Answer 4 · answered May 29 '17 at 16:17

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'

Parth Navadiya · Answer 5 · 2017-11-17T04:43:15.917

1

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');

edited Nov 17 '17 at 04:43

answered Nov 17 '17 at 04:32

Parth Navadiya

720
7
9

score 0 · Answer 6 · answered Feb 19 '22 at 17:11

0

For me it's work in this way

import 'bootstrap/dist/css/bootstrap.css'
require('jquery')
require('bootstrap')

my react version is 17.0.2

answered Feb 19 '22 at 17:11

Abdelkhalek Haddany

195
2
10

Using Jquery and Bootstrap with Es6 Import for React App

6 Answers6

Linked