Borislav Hadzhiev
Tue Mar 29 2022·2 min read
Photo by Matthew Smith
To solve the error "Module not found: Error: Can't resolve 'react-bootstrap'",
make sure to install the react-bootstrap
package by opening your terminal in
your project's root directory and running the command
npm install react-bootstrap bootstrap
and restart your dev server.
Open your terminal in your project's root directory (where your package.json
file is located) and run the following commands:
# 👇️ with NPM npm install react-bootstrap bootstrap # 👇️ ONLY If you use TypeScript npm install --save-dev @types/react-bootstrap @types/bootstrap # ---------------------------------------------- # 👇️ with YARN yarn add react-bootstrap bootstrap # 👇️ ONLY If you use TypeScript yarn add @types/react-bootstrap @types/bootstrap
The command will add the react-bootstrap package to the dependencies of your project.
npm start
command.You should now be able to import and use the react-bootstrap
package in your
React.js app.
import {Button, Badge} from 'react-bootstrap'; import 'bootstrap/dist/css/bootstrap.min.css'; // or // import Button from 'react-bootstrap/Button'; // import Badge from 'react-bootstrap/Badge'; function App() { return ( <div> <p> <Button variant="primary"> Profile <Badge bg="secondary">9</Badge> <span className="visually-hidden">unread messages</span> </Button> </p> </div> ); } export default App;
If the error is not resolved, try to delete your node_modules
and
package-lock.json
(not package.json
) files, re-run npm install
and restart
your IDE.
# 👇️ delete node_modules and package-lock.json rm -rf node_modules rm -f package-lock.json # 👇️ clean npm cache npm cache clean --force npm install
If you're still getting the "Module not found: Error: Can't resolve
'react-bootstrap'" error, open your package.json
file and make sure it
contains the react-bootstrap
package in the dependencies
object.
{ // ... rest "dependencies": { "bootstrap": "^5.1.3", "react-bootstrap": "^2.2.2", }, // 👇️ only if you use TypeScript "devDependencies": { "@types/bootstrap": "^5.1.9", "@types/react-bootstrap": "^0.32.29", } }
The react-bootstrap
module should NOT be globally installed or be in your
project's devDependencies
, it should be in the dependencies
object in your
package.json
file.
You can try to manually add the lines and re-run npm install
.
npm install
Or install the latest version of the package:
npm install react-bootstrap@latest bootstrap@latest # 👇️ ONLY If you use TypeScript npm install --save-dev @types/react-bootstrap@latest @types/bootstrap@latest