Module not found: Can’t resolve ‘react-router-dom’

Posted on by Nathaniel Kirk
Module not found: Can't resolve 'react-router-dom'

You will know how to fix the “Module not found: Can’t resolve ‘react-router-dom‘” in this article. In some cases, you can install the react-router-dom package or examine the package.json file for dependencies.

What causes the error “Module not found: Can’t resolve ‘react-router-dom'”?

Applying the most recent syntax when working with Javascript can sometimes be a pain because the code can work in one browser but fail in another, or a browser with the most recent version works fine but is stuck on a lower version because it still needs to be supported.

React-Router is a standard routing library in React. It keeps the app’s interface in sync with the URL in the browser. React-Router allows you to route the “data flow” in your application explicitly. It is equivalent to the assertion. If you have this URL, it will be equivalent to this Route and the corresponding interface.

Code:

import React from "react";
import {
  BrowserRouter as Router,
  Route,
} from "react-router-dom";
const App = () => {
  return (
    <>
    <h2>Module not found: Can't resolve 'react-router-dom' | LearnShareIT</h2>
      <Router>
        <div className="App">
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
        </div>
      </Router>
    </>
  );
};
 
export default App;

Output:

“Module not found: Can’t resolve ‘react-router-dom'” error occurs when webpack can’t find react-router-dom module in your project, so how can you fix this?

Solutions to fix this error

Installing react-router-dom package

Reinstalling the react-router-dom package is the easiest way to fix this error because webpack reports that the program does not have it.

The error will be fixed when you install the react-router-dom package. Webpack will find the imported modules, such as Router or Route, in the project’s sources. You can install it with the npm or yarn command as follows

Terminal:

npm install react-router-dom
yarn add react-router-dom

Wait until the program has finished installing the project’s package before running the project with the command npm to start to see the results.

Webpack can recognize that you have fully configured react-router-dom and continue running the application once the react-router-dom Module has been installed. If not, the error persists. You can use the methods listed below.

Checking the dependencies in the package.json file

And in this way, you will have to check if your package.json file has dependencies as below. Is my package.json file working correctly after installing the react-router-dom library? Is it the same in your project?

Code:

"dependencies": {
    "react": "^18.2.0",
    "react-bootstrap": "^2.6.0",
    "react-router-dom": "^6.4.3",
}

At the time of writing,react-router-dom is on version 6.4.3, and if you install it, you can go to the library’s homepage to see the latest version of the package so you can easily update it. Good luck with these methods.

Summary

To summarize, the article showed you how to fix the “Module not found: Can’t resolve ‘react-router-dom’” error. The react-router-dom library reinstallation will be the most thorough. Let’s try it.

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *