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