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?

Answer 1

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.

Answer 2

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