Bootstrap's JavaScript requires jQuery - Reactjs

Question

I have to use bootstrap with reactjs and when i try to import Bootstrap.js it gives me error

Bootstrap's JavaScript requires jQuery

Here is my import statements (I tried following)

import $ from 'jquery';
import jQuery from 'jquery'; //I installed jquery using npm
import '@shopify/polaris/jquery'; //I put jquery.js file 
import '@shopify/polaris/bootstrap';

Nothing is seems to work here.

Adding to html file file, removed the error for now. Thanks :) — Noman Ali, Sep 26 '17 at 06:20
Maybe a duplicate: https://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack — Quoc-Anh Nguyen, Sep 26 '17 at 06:38

score 1 · Answer 1 · answered Sep 26 '17 at 06:42

1

You can use React Bootstrap as well as an alternative. It has all elements of the Bootstrap plus it blends well with ReactJS elements.

answered Sep 26 '17 at 06:42

Rishi Raj

404
3
11

score 1 · Accepted Answer · answered Sep 26 '17 at 07:10

in your HTML file:

<html>
      <head>

           ..................
           ..................
           ..................
      </head>

      <body>
           ..................
           <script src="jquery.js"></script> // <<<<<< you missing import jquery here
           <script src="bootstrap.js"></script> // <<<<<<< you have this one
           ..................
      </body>
</html>

score 0 · Answer 3 · answered Jun 04 '20 at 13:42

Bootstrap requires jquery to be available on the global object. Try the below -

import 'bootstrap/dist/css/bootstrap.min.css';

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

I have verified it for bootstrap@3.3.7 and jquery@2.2.4.

Ref - issue

Bootstrap's JavaScript requires jQuery - Reactjs

3 Answers3