Using Jquery and Bootstrap with Es6 Import for React App

Question

Hello, I am trying to include jquery and bootstrap in a Reactjs project, but for this I am using es6 import. I have enabled import as shown below in my index.js file. But when loading the page, it gives an error saying that Bootstrap Javascript requires jquery. I have already installed npm with all the necessary packages. How can I get jquery in my completed and reduced 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 an answer on this site here.

Step 1: Install both jquery and bootstrap

npm install jquery bootstrap --save

2: vendor.ts:

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

3: wepback.common.js :

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

jquery

, ES6, import

Answer 2

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

Gulp webpack, .

Answer 3

import jquery from 'jquery'

window.jQuery = jquery

require('bootstrap')

Answer 4

- jquery

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 5

CSS index.js

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