Proudly Hosting over 100,000 Fast Websites since 2010

Module Not Found: Error: Can’t Resolve ‘react-router-dom’ (Error Solved –  Complete Guide)

Module Not Found Error Can't Resolve 'react-router-dom' (Error Solved -  Complete Guide)

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: [





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’;



    <Route path=”/” element={<Home />} />

    <Route path=”/about” element={<About />} />



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.


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.


Leave a Reply

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