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

Community · Accepted Answer · 2017-05-23 12:34:19Z

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, 2017 at 12:34

CommunityBot

11 silver badge

answered Nov 12, 2016 at 1:34

David Choi

6,66910 gold badges30 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

João Pereira Over a year ago

ty for the important info @David !

Climb Tree Over a year ago

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

Sebastian Over a year ago

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

iamtheasad Over a year ago

import 'jquery'; import 'bootstrap/dist/js/bootstrap'; its worked for me

Med · Accepted Answer · 2016-10-27 15:42:37Z

2

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

You can use Gulp and webpack to minify your files

edited Oct 27, 2016 at 15:42

answered Oct 27, 2016 at 15:33

Med

2,8121 gold badge14 silver badges14 bronze badges

1 Comment

David Choi Over a year ago

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.

Andre Figueiredo · Accepted Answer · 2017-09-14 21:55:45Z

2

Testing with this

import jquery from 'jquery'

window.jQuery = jquery

require('bootstrap')

edited Sep 14, 2017 at 21:55

Andre Figueiredo

13.5k8 gold badges52 silver badges75 bronze badges

answered May 7, 2017 at 8:07

Christian Irack

591 bronze badge

Comments

Heroselohim · Accepted Answer · 2017-05-29 16:17:26Z

1

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'

answered May 29, 2017 at 16:17

Heroselohim

1,3011 gold badge19 silver badges23 bronze badges

Comments

Parth Navadiya · Accepted Answer · 2017-11-17 04:43:15Z

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, 2017 at 4:43

answered Nov 17, 2017 at 4:32

Parth Navadiya

7207 silver badges9 bronze badges

Comments

Abdelkhalek Haddany · Accepted Answer · 2022-02-19 17:11:14Z

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, 2022 at 17:11

Abdelkhalek Haddany

4831 gold badge5 silver badges15 bronze badges

Collectives™ on Stack Overflow

Using Jquery and Bootstrap with Es6 Import for React App

6 Answers 6

4 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related