How To Fix Module Not Found: Can’t Resolve ‘React-Bootstrap’ In React

If you don’t know how to fix the error “Module not found: Can’t resolve ‘react-bootstrap'” in React. It took you an hour to find a way to fix it. This article has the solution for you.

The reason for the error “Module not found: Can’t resolve ‘react-bootstrap'” in React

The error occurs when you have not installed the react-bootstrap library or imported it incorrectly, like in the example below. I import Button and use it, but it gives this error.

Code:

import React from "react";
import Button from "React-Bootstrap/Button"
const App = () => {
  const handleOnclick = () => {};
 
  return (
    <div>
      <Button bsStyle="success" bsSize="small" onClick={handleOnclick}>
        LearnShareIT Home
      </Button>
    </div>
  );
};
 
export default App;

Output:

How to fix this error?

Install react-bootstrap

React-Bootstrap provides a ready-made set of React components with the look and feels of Twitter Bootstrap components, making it easier to build UI for React apps. For example, when we describe a small button, the text is “LearnShareIT Home”, the click event triggers the callback function “handleOnclick”.

Code:

<Button bsStyle="success" bsSize="small" onClick={handleOnclick}>
LearnShareIT Home
</Button>

React-Bootstrap helps React developers be more productive by using Bootstrap components that have been simplified into React components.

Because this error may be caused by your IDE not finding the library in the program. You need to install this library to be able to use the module inside.

Terminal:

npm i react-bootstrap

yarn add react-bootstrap bootstrap

You can install the latest react-bootstrap library using the above commands and import it into the program.

Check ‘dependencies’ in ‘package.json’ file

This way, you will check if the ‘dependencies’ in the ‘package.json’ file of the program contain the react-bootstrap library. And you also have to make sure you have bootstrap and react-bootstrap libraries. Then your package.json file should look like the below:

Code:

 "dependencies": {
    "bootstrap": "^5.2.2",
    "react": "^18.2.0",
    "react-bootstrap": "^2.5.0",
}

Suppose your ‘dependencies’ doesn’t look like that, as this is happening because of your IDE, where you have the library installed, then you can add it manually. I hope these methods are helpful to you.

Summary

We have just shown you how to fix the error “Module not found: Can’t resolve ‘react-bootstrap'” in React. You can handle it by Installing react-bootstrap or checking ‘dependencies’ in the ‘package.json’ file. Let’s try these methods.

Maybe you are interested:

• Property does not exist on type ‘JSX.IntrinsicElements’
• Module not found: Can’t resolve ‘styled-components’
• Module not found: Can’t resolve ‘react-dom’

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs