reactstrap: Module not found: Can't resolve 'bootstrap/dist/css/bootstrap.min.css' in
I think I have an obscure "where to put things’ #newbie question: in this package
it says “Import Bootstrap CSS in the src/index.js file:” import ‘bootstrap/dist/css/bootstrap.min.css’; …
but when I do this I’m getting
Module not found: Can't resolve 'bootstrap/dist/css/bootstrap.min.css' in '/Users/jason/Work/[XXX]/[xxx].com-front/client/src'
even though I downloaded boostrap 4 and put the CSS files into this location — /client/src/bootstrap/dist/css/bootstrap.min.css
did a miss a step? I don’t understand why bootstrap.min.css is referenced but not explicitly added to the project in the setup instructions.
my App.js file looks like
import React, { Component } from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button } from 'reactstrap';
class App extends Component {
state = {cities: []}
async componentDidMount() {
const response = await fetch('/cities')
const cities = await response.json()
this.setState({cities: cities})
}
render() {
return (
<div>
<header>
</header>
<Button color="danger">Danger!</Button>
<ul>
{this.state.cities.map( city => {
return <li key={city.name}> <b>{city.name}</b>: {city.population}</li>
})}
</ul>
</div>
);
}
}
export default App;
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 7
- Comments: 21 (4 by maintainers)
import 'bootstrap/dist/css/bootstrap.min.css';is referencing the file from node_modules. You will need tonpm install bootstrapto put it in your node_modules.-OR-
If this is the case, you can reference it with a relative path:
import './bootstrap/dist/css/bootstrap.min.css';@youngheart12 Am still facing the issue if I import like this
import './bootstrap/dist/css/bootstrap.min.css';however, if I insert like below it works fine
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';hey @jasonfb just install this npm install --save bootstrap@^4.0.0-alpha.6 react-bootstrap@^0.32.1 and add import ‘bootstap/dist/css/bootstrap.min.css’ in the index.js it will work fine if you still having trouble you can reach me anytime
I generally use
yarn addinstead ofnpm installthis seems to have fixed the issue
yarn add bootstrapafter this I see that I was missing in my package.json
dependenciesand also it looks like bootstrap@^4.2.1 got added to yarn.lock now also.
this seems to have cleared up the problem
npm install --save bootstrapand try againThat comment is incorrect. Using
./thinks its relative to the current directory and will not scan the node modules. You will need to usebootstrap/dist/css/bootstrap.min.cssfor it to look in the node modules directory for the package.I’ve faced the same problem and the solution which @TheSharpieOne offered in his first answer worked for me
npm install bootstrapI had the same issue restarting the server after installing worked for me. LoL
npm install bootstrap
yes work for mee thank all
npm install bootstrap - worked for me
I just updated their comment to make sure no one gets confused