5

I'm new to react js. I'm trying to create a component. For that I've installed bootstrap (version 4.1.1) which is successfully installed.

Then I imported the same in index.js and while reloading the page (localhost:3000) I got the error msg: 

Module not found: 
Can't resolve 'bootstrap/dist/css/bootstrap.css' in 'C:\Users\test\counter-app\src'

My index.js:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.css";

ReactDOM.render(<App />, document.getElementById("root"));

serviceWorker.unregister();

My package.json :

{
  "name": "counter-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts": "2.1.8"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Please help me to fix this.

Improve this question
2
  • 2
    You package.json is missing bootstrap. Run npm install bootstrap Commented Mar 14, 2019 at 13:55
  • Hi @lupa, this isn’t necessarily the case in general, as the module could be installed within the node_modules directory and could be used within the app to test if this is a module worth keeping. You only add dependencies to the package.json once you’re sure you’re using this module and want it to be listed as a build dependency moving forward. But in this case I think the issue is, as you pointed out as well, the module wasn’t installed correctly. Hopefully that makes sense :) Commented Mar 14, 2019 at 14:35

5 Answers 5

Reset to default
9

Change import path to bootstrap.min.css like this:

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

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

4 Comments

Problem is cus you don't have installed bootstrap. You can check that in "dependencies": { "react": "^16.8.4", "react-dom": "^16.8.4", "react-scripts": "2.1.8" }, when you install bootstrap or some another library in your react project you should see that in package.json / dependencies part.
execute this command "npm install bootstrap". After that check package.json does you have boottrap defined there. Let me know if works.
Great..! now it works. But I've already installed that by using the command : npm i [email protected]. So why it doesn't work..?
Cus command which you execute is not correct: "npm i [email protected]." you just need to execute "npm install bootstrap"
3

This occurs either because the installation of a library wasn't successful, i.e. bootstrap had an issue installing within your node_modules directory, or your reference to the library within your code is incorrect. Can you verify that your bootstrap installation was correct by looking within your node_modules for a bootstrap folder?

This would be at <base_path>/node_modules/bootstrap where <base_path> is your project's root directory location. For you I believe the absolute path is the following:

C:\Users\test\counter-app\src\node_modules\bootstrap

If you don't see the bootstrap directory please do the following:

npm i -S bootstrap

as this will save bootstrap as dependency for your project. Your reference to bootstrap within index.js looks fine: import 'bootstrap/dist/css/boostrap.css'; With that being said, a lot of bootstrap's features depend on the following libraries: popper.js, and jquery. So once you get your installation issue resolved you have to install these modules as well and reference them appropriately within your index.js. Something along the lines of:

Install modules:

npm i -S popper.js
npm i -S jquery

index.js

import 'jquery/dist/jquery.js';
import 'popper.js/dist/umd/popper.js';
import 'boostrap/dist/js/bootstrap.js';

Hopefully that helps!

Improve this answer

2 Comments

Thx this was really helpful, I was searching for this for a long time. One more suggestions, we can import min versions rather than regular versions.
@SaahithyanVigneswaran I'm glad to hear you found this answer useful. Yes you should use minified versions, for every library your application is dependent upon, when deploying your code to a production level environment. However, for development it may be useful to use non-minified versions of dependency libraries in case you need to trace a stack trace to determine the root cause of a bug. I guess it is a matter of personal preference though.
0

Using bootstrap like that is not really recommended. You should look into react-bootstrap. You would need to run:

npm install react-bootstrap bootstrap

and then:

import Button from 'react-bootstrap/Button';

// or less ideally
import { Button } from 'react-bootstrap';

Check out their documentation for more.

Improve this answer

Comments

0

I had the same problem but managed to solve it using these steps:

  1. Remove the node_modules folder
  2. Install bootstrap by running npm install bootstrap
  3. Install other packages by running npm install.
Improve this answer

Comments

0

Beware of confusing 'boostrap' with 'bootsrap'

Theese, install different packages:

$ npm install boostrap

$ npm install bootstrap

I was requiring the second. Because of that, I've got question's error.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.