11

I'm working on a project using React. I've tried to install Bootstrap, but my project won't compile. I've installed jquery@1.9.1 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?

Leia_Organa
  • 1,894
  • 7
  • 28
  • 48
  • 1
    Read this: https://stackoverflow.com/questions/38015494/can-we-use-pure-bootstrap-with-react-js. 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 Mar 31 '18 at 15:21
  • @Rahamin, that was very helpful and I ended up using reactstrap in my application! – Leia_Organa Mar 31 '18 at 18:12

3 Answers3

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.

Voke Junior
  • 314
  • 5
  • 8
1

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

npm install jquery --save

user14448473
  • 11
  • 1
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

Zablon
  • 117
  • 1
  • 4