score:24

Accepted answer

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

score: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

score: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'

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

score:2

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

You can use Gulp and webpack to minify your files

score:2

Testing with this

import jquery from 'jquery'

window.jQuery = jquery

require('bootstrap')

Related Query

More Query from same tag