Reputation: 4463

Module not found: Can't resolve 'bootstrap/dist/css/bootstrap-theme.css' in 'C:\react-form-validation-demo\src'

I am newbie in react.js. I have been following instruction in how-to-do-simple-form-validation-in-reactjs and I can run http://localhost:3000/

But after adding bootstrap in index.js, I got this error

Failed to compile ./src/index.js Module not found: Can't resolve
'bootstrap/dist/css/bootstrap-theme.css' in
'C:\react-form-validation-demo\src'

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

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

If I remove these two lines below, it works:

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

Upvotes: 48

Answers (20)

Mohammed

Reputation: 201

You need to install both packages reactstrap and bootstrap by running these commands:

npm i reactstrap
npm i bootstrap

Upvotes: 2

Delfino

Reputation: 567

In Bootstrap version 4, the file 'bootstrap-theme.css' has been removed, according to the issue on GitHub. See the change history for details.

If you want to continue using version 4, remove this import, else downgrade to version 3.

Upvotes: 27

TAH

Reputation: 49

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

Upvotes: 2

mFos

Reputation: 11

Some times is writing error

bootstrap/dist/css/bootstrap.min.css

boostrap/dist/css/bootstrap.min.css

check this tip, sometimes happend

Upvotes: 1

Cheruiyot A Kirui

Reputation: 147

Check if you have bootstrap in package.json file . If it is there remove and use the below commands to reinstall or install if it is not there.

npm install --save bootstrap

Upvotes: 3

Mudimba Moonde

Reputation: 35

from the "resource/js/app.js" remove require('./bootstrap')

Upvotes: 0

Qasim Shaikh

Reputation: 1

I had simply reinstalled the previous Bootstrap version which I installed in my project folder and it worked.

Upvotes: 0

ash

Reputation: 5155

Adding the solution to the cause I ran into - it was my miss, but still unclear when reading the other answers.

If react-bootstrap is installed solo like this:

npm install --save react-bootstrap

then bootstrap will be missing. Try the following to correct:

npm install --save bootstrap

The correct way to install initially is as follows:

npm install --save react-bootstrap bootstrap

Upvotes: 21

Yuvraj Patil

Reputation: 8736

Make sure bootstrap and react-bootstrap are installed.

npm install bootstrap react-bootstrap

Upvotes: 0

Fatih Bayhan

Reputation: 191

Stop the npm server than restart it. It'll be solved if you installed the packages perfectly.

Upvotes: 0

Senthuran

Reputation: 1837

Install the bootstrap using the below command.

npm install react-bootstrap bootstrap

Then include the below line in the index.js file.

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

Upvotes: 8

Mussa Charles

Reputation: 4412

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

Source: github

Upvotes: 5

Higgs Bogson

Reputation: 391

This error is caused by a misconfiguration, version mismatch or corrupted bootstrap install.

If you've got bootstrap and react-bootstrap installed already via some variation of:

npm install --save bootstrap@^4.0.0-alpha.6 react-bootstrap@^0.32.1

(Check if your package.json contains "bootstrap" and "react-bootstrap" if your not sure.)

Just install a different version of bootstrap and rebuild your project. That should replace or add that file (bootstrap/dist/css/bootstrap-theme.css) to that folder. A lower version of bootstrap worked for me as recommended in my create-react-app generated README.md:

npm install --save react-bootstrap bootstrap@3

Adding Bootstrap

You don’t have to use React Bootstrap together with React but it is a popular library for integrating Bootstrap with React apps. If you need it, you can integrate it with Create React App by following these steps:

Install React Bootstrap and Bootstrap from npm. React Bootstrap does not include Bootstrap CSS so this needs to be installed as well:

sh npm install --save react-bootstrap bootstrap@3

Alternatively you may use yarn:

sh yarn add react-bootstrap bootstrap@3

Upvotes: 20

esfandia

Reputation: 71

It is possible that when you installed bootstrap you were not in the directory that create-react-app created (that was the source of my problem). You can check with: npm list, which looks for locally installed packages.

Then scroll all the way to the top and see if you can find bootstrap listed there.

Upvotes: 0

Mohammed Ishaan

Reputation: 397

reinstall the bootstrap and don't forget to mention --save to the command to save it to the node modules this solved the problem for me.

sudo npm install bootstrap --save

Upvotes: 19

Nishantha Bulumulla

Reputation: 429

I got the same problem and this is how I resolved the problem. First of all delete the node_modules directory from the project and then install bootstrap with below command.

npm install 
npm i bootstrap

Then, you can add the below import to the index.js

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

Upvotes: 8

Piyush Vavaliya

Reputation: 5

You can also check that your package.json imported name of dependancy are not the same.

Upvotes: 0

Omar Donnadieu Mercado

Reputation: 355

Remove

import 'bootstrap/dist/css/bootstrap-theme.css'

That worked for me.

Upvotes: 3

Rito

Reputation: 3290

I faced the same issue, but my project was not created with create-react-app, mine was using webpack.

I can answer how I resolved it for webpack, maybe you can find the changes required for create-react-app after you go through this answer.

First I installed these two modules-
style-loader
css-loader

Then I modified the webpack.config.js file and added these lines inside the module.rules array.

{
  test: /\.css$/,
  loader: 'style-loader'
},
{
  test: /\.css$/,
  loader: 'css-loader',
  query: {
    modules: true,
    localIdentName: '[name]__[local]___[hash:base64:5]'
  }
}

This resolved the error in my project. You can also refer to this Github issue thread once, may be that may help you: https://github.com/facebook/create-react-app/issues/301

Upvotes: 2

Rajan Lagah

Reputation: 2528

npm install --save bootstrap@^4.0.0-alpha.6  react-bootstrap@^0.32.1

i face same problem but after installing above packages it work well, may b you should also install same packages

Upvotes: 6

Module not found: Can&#39;t resolve &#39;bootstrap/dist/css/bootstrap-theme.css&#39; in &#39;C:\react-form-validation-demo\src&#39;

Answers (20)

Adding Bootstrap

Related Questions

Module not found: Can't resolve 'bootstrap/dist/css/bootstrap-theme.css' in 'C:\react-form-validation-demo\src'