JIYIK CN >

npm install react-bootstrap bootstrapTo resolve the error “Module not found: Error: Can't resolve 'react-bootstrap'”, make sure to install the react-bootstrap package and restart our development server by opening a terminal in the root directory of our project and running the command

Open a terminal in the root directory of your project (where your package.json file is located) and run the following command:

#  for NPM
$ npm install react-bootstrap bootstrap

#  仅当我们使用 TypeScript
$ npm install --save-dev @types/react-bootstrap @types/bootstrap

# ----------------------------------------------

#  for YARN
$ yarn add react-bootstrap bootstrap

#  仅当我们使用 TypeScript
$ yarn add @types/react-bootstrap @types/bootstrap

This command will add the react-bootstrap package to your project's dependencies.

Be sure to restart your development server and IDE if necessary. Our development server will not pick up changes until you stop and re-run the npm start command.

You should now be able to import and use the react-bootstrap package in your React.js application.

App.js

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 deleting our node_modules and package-lock.json (not package.json) files, re-run npm install and restart the IDE.

# 删除 node_modules 和 package-lock.json
$ rm -rf node_modules
$ rm -f package-lock.json

#  清除 npm 缓存
$ npm cache clean --force

$ npm install

If the error persists, make sure to restart your IDE and development server. VSCode often glitches and sometimes restarting can fix the problem.

If you still get the "Module not found: Error: Can't resolve 'react-bootstrap'" error, open your package.json file and make sure it includes the react-bootstrap package in the dependencies object.

{
  // ... rest
  "dependencies": {
    "bootstrap": "^5.1.3",
    "react-bootstrap": "^2.2.2",
  },

  "devDependencies": {
    "@types/bootstrap": "^5.1.9",
    "@types/react-bootstrap": "^0.32.29",
  }
}

The react-bootstrap module should not be installed globally or in your project's devDependencies, it should be in the dependencies object of your package.json file.

We can try adding these lines manually and re-running npm install.

$ npm install

Or install the latest version of the package:

# for NPM
$ npm install react-bootstrap@latest bootstrap@latest

# 仅当使用 TypeScript
$ npm install --save-dev @types/react-bootstrap@latest @types/bootstrap@latest