The “can’t resolve ‘react-router-dom'” error is a common problem developers face when working with React. This module not found error occurs when the React Router package is not installed or configured correctly in your React application.
In this comprehensive guide, we’ll explain what’s causing this error, how to properly fix it, and best practices for avoiding router issues in your React apps going forward.
What is React Router?
Before diving into the error, let’s briefly explain what React Router is and why it’s used:
- React Router is the standard routing library for React applications. It allows you to build single-page React apps that have multiple views and navigation without loading new pages.
- Routing enables seamless navigation between “pages” by intercepting URL changes and rendering the matching React component for that route.
- React Router manages the creation of a router object that defines the page routes and maps them to components.
- To use routing, you must install the react-router-dom package into your project. Attempting to import from it without installing it leads to the “can’t resolve” error.
The “Can’t Resolve ‘react-router-dom'” Error Explained
When you attempt to import React Router using:
import { BrowserRouter } from ‘react-router-dom’;
But get an error like:
Module not found: Error: Can’t resolve ‘react-router-dom’
It means React Router has not been properly installed and configured in your project.
The import is failing because the react-router-dom module cannot be found by the JavaScript module resolver.
Some common reasons this happens:
- react-router-dom was never installed
- It was installed incorrectly
- Webpack isn’t configured properly to resolve the module
- You’re importing it with the wrong case like ReactRouterDOM
Fortunately this issue can be easily fixed by properly installing and importing React Router.
Fixing the Error in Create React App
If you’re using Create React App, installing React Router is straightforward:
npm install react-router-dom
This will install it and save it to your package.json file automatically.
Then import it properly using:
import { BrowserRouter } from ‘react-router-dom’;
Ensuring you use the right casing – react-router-dom, not ReactRouterDOM.
This should immediately fix the “can’t resolve” error in any Create React App project.
Troubleshooting Tips for Other Build Setup
For other build configurations like parcel, webpack or vite, check these areas:
1. Case Sensitivity
Import the module using proper casing:
// Correct casing
import { BrowserRouter } from ‘react-router-dom’;
// Incorrect casing
import { BrowserRouter } from ‘ReactRouterDOM’;
JavaScript is case sensitive so mixups in casing of packages can cause “can’t resolve” errors.
2. Installation Location
Make sure react-router-dom is installed in the correct location:
// Project location
npm install react-router-dom
// Global location
npm install -g react-router-dom
If accidentally installed globally, it won’t be resolvable in your project.
3. Webpack Config
Double-check your webpack resolve modules configuration:
// webpack.config.js
module.exports = {
// …
resolve: {
modules: [
‘node_modules’
]
}
}
This needs to include node_modules so webpack will look there to resolve imports.
4. Reinstall Dependencies
Try removing and reinstalling all modules:
rm -rf node_modules
npm install
This resets all dependencies which often resolves issues with modules not being found.
5. Check Dependency Version
Ensure you have a compatible version of react-router-dom installed:
“dependencies”: {
“react-router-dom”: “^5.1.2”,
}
Major version differences could cause resolution issues.
With these troubleshooting tips, the “can’t resolve” error can be quickly pinpointed and fixed for any React project setup.
Importing React Router Correctly
Once react-router-dom is installed properly, import it using:
// CommonJS
const ReactRouterDOM = require(‘react-router-dom’);
// ES Modules
import { BrowserRouter } from ‘react-router-dom’;
The primary classes you’ll need are:
- BrowserRouter – The router provider for web projects
- Routes – Defines the app routes
- Route – Maps routes to components
See React Router docs for other named exports you can import.
A typical router setup looks like:
import { BrowserRouter, Routes, Route } from ‘react-router-dom’;
<BrowserRouter>
<Routes>
<Route path=”/” element={<Home />} />
<Route path=”/about” element={<About />} />
</Routes>
</BrowserRouter>
This maps homepage to the Home component and /about to the About component.
With the router imported and setup properly, navigation can now be added using Link components.
Avoiding Router Errors in React Apps
Here are some best practices for using routing without issues:
- Always install routing packages like react-router-dom locally in your project, not globally.
- Double check casing when importing packages. react-router-dom not ReactRouterDom.
- Define absolute imports for easier importing:
import { BrowserRouter } from ‘packages/react-router-dom’;
- Setup an alias for the react-router package:
// webpack.config.js
resolve: {
alias: {
‘react-router’: ‘react-router-dom’
}
}
- Then import using just:
import { BrowserRouter } from ‘react-router’;
- Use a package.json browser field or shim to ensure client/server compatibility.
- Ensure bundler configs like Webpack resolve node_modules properly.
- Reinstall modules or reset the cache if you make package changes.
Paying attention to these details when installing and importing router packages will help avoid annoying “can’t resolve” errors.
Conclusion
While “can’t resolve” errors in React can be frustrating, this guide has equipped you to diagnose router issues and get up and running quickly. We covered the core reasons the error occurs – namely incorrect installation and importing of React Router.
For Create React Apps, simply installing react-router-dom locally and importing it properly resolves it. For other setups, careful troubleshooting and resetting dependencies usually fixes it.
Most importantly, adopting best practices around managing packages, casing, bundler config, and imports prevents router issues in the first place. Equipped with this understanding, you can speedily fix router problems when they occur and build robust React apps that handle routing flawlessly.
