Bootstrap in React -- can't resolve jQuery Module?

Question

I'm working on a project using React. I've tried to install Bootstrap, but my project won't compile. I've installed [email protected] using npm. But I keep on getting the following error message:

./node_modules/bootstrap/dist/js/bootstrap.js
Module not found: Can't resolve 'jquery' in '/Users/my_name/React_Projects/my_react_project/node_modules/bootstrap/dist/js'

This is a project that I was given to work on, so I haven't made it from scratch -- so I'm just piecing things together as I go. I thought it may be an error with Webpack, so one of the things I tried to do was add jquery as an external resource in my webpack.config.js file -- but there is no such file in the project at this point.

This project was created using react-scripts, which I am told is a wrapper around Webpack. Anyone have any idea how to resolve this issue? How can I get jQuery to work so I can start using Bootstrap?

Read this: stackoverflow.com/questions/38015494/…. Use either resctstrap or react-bootstrap. I tried both and I think that reactstrap is better, easier to use, although the other one is more popular. — Yossi
– Yossi, Commented Mar 31, 2018 at 15:21
@Rahamin, that was very helpful and I ended up using reactstrap in my application! — Leia_Organa
– Leia_Organa, Commented Mar 31, 2018 at 18:12

Voke Junior · Accepted Answer · 2020-01-15 14:22:13Z

27

You will need to install the jquery and popper.js packages from npm. In your terminal, run below command:

npm install jquery popper.js

or

yarn add jquery popper.js

Next, go to the src/index.js file and add the following imports:

import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';

There you have it. You can now use the full power of Bootstrap and jQuery in your React application.

answered Jan 15, 2020 at 14:22

Voke Junior

3146 silver badges8 bronze badges

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

1 Comment

Peter Palmer Over a year ago

really this is working to you????

user14448473 · Accepted Answer · 2020-10-14 10:52:56Z

1

You will need to install jquery package from npm. In your terminal, run below command:

npm install jquery --save

answered Oct 14, 2020 at 10:52

user14448473

111 bronze badge

Comments

Zablon · Accepted Answer · 2020-10-21 05:43:21Z

1

This post solved my issues, maybe it can help you guys out too. Just run these two commands.

npm install --save resolve-url-loader --only=dev
npm i --save-dev bootstrap@next bootstrap-loader tether jquery

Look here link

answered Oct 21, 2020 at 5:43

Zablon

1972 silver badges5 bronze badges

Collectives™ on Stack Overflow

Bootstrap in React -- can't resolve jQuery Module?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related