Failed to compile. Module not found: Can't resolve 'react-router-dom'

Question

After npm start, the browser gives the error:

Failed to compile ./src/components/App/App.js Module not found: Can't resolve 'react-router-dom'.

React-router-dom has been added to the dependencies in npm and so has react-router and react.

Project has been created using the create-react-app myapp cmd line. This is runned on a localhost, node server. I have an api and app folder inside my project folder. I have tried various things. Updated manually my package.json inside the app folder, reinstalled react-router-dom, delete the package-lock.json in the app folder and reinitialize it. My api folder holds nothing but node_modules, my api file, route.js, config.js, index.js and also a package.json and package-lock.json. I have tried the npm build command in my app folder. It just creates a 'build' folder which holds the same files as my public folder inside my app folder. I also tried running yarn add react-router-dom.

//=========App.js file=========

//dependencies
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

//components
import Header from '../Header/Header';
import Footer from '../Footer/Footer';
import Home from '../Pages/Home';
import StudentOverview from '../Pages/StudentOverview';
import StudentDetails from '../Pages/StudentDetails';
import Management from '../Pages/Management';
import StudentAdd from '../Pages/StudentAdd';
import Exercise from '../Exercise/Exercise';

//includes
import '../../../public/css/kdg-fonts.css';
import '../../../public/css/normalize.css';
import '../../../public/css/responsive.css';
import '../../../public/css/say-my-name.css';
import '../../../public/css/style.css';

//Run
class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Route path='*' component={Header} />
          <Route path='*' component={Footer} />
          <Route exact path='/' component={Home} />
          <Route exact path='/studenten' component={StudentOverview} />
          <Route exact path='/studenten/:id' component={StudentDetails} />
          <Route exact path='/beheer' component={Management} />
          <Route exact path='/beheer/add' component={StudentAdd} />
          <Route exact path='/oefenen' component={Exercise} />
        </div>
      </Router>
    );
  }
}

export default App;

//=========appfolder/package.json file=========

{
  "name": "saymyname",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "2.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "gulp": "^4.0.0",
    "gulp-changed": "^3.2.0",
    "gulp-clean-css": "^4.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "gulp-uglify": "^3.0.1"
  }
}

UPDATE: npm install -S react-router-dom resolved the error.

make sure you install react-router-dom using `yarn add react-router-dom` or `npm install -S react-router-dom` — Shubham Khatri, Dec 24 '18 at 13:20
Either run `yarn` or `npm install` when in the project folder. — Paul Fitzgerald, Dec 24 '18 at 13:24
`react-dom` and `react-router-dom` are different libraries, you have to add `react-router-dom` to your packages list. — Andrew, Dec 24 '18 at 13:26
@ShubhamKhatri I have tried `yarn add react-router-dom` as well. I just tried `npm install -S react-router-dom` and it resolved the error. Before I tried `npm i react-router-dom`, `npm install --save react-router-dom` and `npm install react-router-dom@4.2.2`. How come these lines don't do the job? Also, thank you :) — Dokme, Dec 24 '18 at 13:47
@PaulFitzgerald I have tried both these commands. Using the `npm install -S react-router-dom` resolved the error I think — Dokme, Dec 24 '18 at 13:48
@Andrew I did that by updating the package.json and even after I did that, it didn't resolve my error. Installing react-router-dom using `npm install -S react-router-dom` resolved my error I think — Dokme, Dec 24 '18 at 13:48
Just out of curiousity can you try creating your app using npx to execute the latest version of create-react-app? e.g. `npx create-react-app myapp`. I'm wondering if you have an older version of CRA — DMcCallum83, Dec 24 '18 at 13:49
@DMcCallum83 Before I made my project I have installed the latest version of create-react-app. To answer your question, I have used `npx create-react-app myapp` and this worked properly. — Dokme, Dec 24 '18 at 14:00
@Dokme you should either accept an answer or create your own just to close the question. — Dave Kanter, Oct 14 '20 at 20:25

score 58 · Answer 1 · edited Jun 26 '20 at 16:16

58

I was facing the same issue. The following command will resolve it:

npm install react-router-dom --save

edited Jun 26 '20 at 16:16

Jason Aller

3,391
28
37
36

answered Dec 02 '19 at 11:10

Farzana Khan

884
4
7

score 17 · Answer 2 · answered Jun 04 '20 at 20:22

17

In my case I use Typescript and I needed to install

npm i react-router-dom

AND

npm i @types/react-router-dom

After both installations errors gone.

answered Jun 04 '20 at 20:22

Happy Family

359
2
6

None of listed answers helped me. In this case left my solution. Don't be so angry. – Happy Family Jun 04 '20 at 20:49
No, I meant look at the question, it says: `UPDATE: ... resolved the error` – Learn for Fun Jun 04 '20 at 20:50
2

The only answer that helped me – Assen Kolov Oct 09 '20 at 16:14
Thanks for post this Answer. – Ng Sharma Oct 14 '20 at 12:37

Rajnikant Lodhi · Answer 3 · 2019-06-11T09:11:24.260

14

This error fix by following steps.
Step.1: npm install --save react-router-dom
Step.2:<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
script tag put in public/index.js

edited Jun 11 '19 at 09:11

answered Jun 08 '19 at 10:38

Rajnikant Lodhi

358
3
9

8

It works when done only Step.1. No need do the Step.2 – Sasika Miyuran Aug 19 '19 at 12:19

score 3 · Answer 4 · edited Dec 02 '20 at 16:33

3

For this problem "Module not found: Can't resolve 'react-router-dom' in"

//I found the following solving

// using ES6 modules

import { BrowserRouter, Route, Link } from "react-router-dom";

if it is not working so you have to use the following that I used using CommonJS modules

const BrowserRouter = require("react-router-dom").BrowserRouter;

const Route = require("react-router-dom").Route;

const Link = require("react-router-dom").Link;

edited Dec 02 '20 at 16:33

Vasim Shaikh

4,171
1
19
45

answered Dec 02 '20 at 00:02

Aldomy

31
1

Try to use the code editor button to insert readable code. – Shimi Dec 02 '20 at 03:50
2

@Shimi It is my first time answer a question :) – Aldomy Dec 02 '20 at 23:01
Congratulations buddy, good luck. The code is structured now with higher readbility. – Shimi Dec 02 '20 at 23:02
Thank you Shimi and thank you @Vasim Shaikh – Aldomy Dec 02 '20 at 23:07

score 1 · Answer 5 · edited Jun 26 '20 at 06:48

1

Problem is, your react project does not have a react-router-dom module. You can install and save it with the help of the following command. Just run this command within your project root and everything works fine.

npm install --save react-router-dom

edited Jun 26 '20 at 06:48

Hariharan AR

928
8
17

answered Apr 09 '20 at 06:49

Pranay kumar

930
1
9
24

score 0 · Answer 6 · answered Jun 26 '20 at 11:44

0

npm i react-router-dom

or

npm install react-router-dom --save

This error occurs because of react-router-dom npm package is missing. install them by using the above cmd.

answered Jun 26 '20 at 11:44

Hariharan AR

928
8
17

score 0 · Answer 7 · edited Oct 06 '20 at 15:47

0

You need to use --save while installing "react-router-dom". This will ensure that package is stored in package.json file as a dependency and when you try to build the solution on any another machine or on build server, it will take all the dependencies from package.json file and install them.

If you want to install all dependencies on a fresh machine, run the command - npm install

edited Oct 06 '20 at 15:47

Jared Forth

1,418
5
13
28

answered Oct 06 '20 at 11:32

Naresh Nagpal

103
1
4

score 0 · Answer 8 · answered Dec 18 '20 at 00:26

0

Make sure to use npm install --save react-router-dom not npm install --save react-router

answered Dec 18 '20 at 00:26

Stanflows

1
3

score 0 · Answer 9 · edited Feb 06 '21 at 16:17

0

npm install react-router-dom

This command resolves the same issue I faced.

edited Feb 06 '21 at 16:17

CertainPerformance

260,466
31
181
209

answered Feb 06 '21 at 09:22

Shubham Khatik

11

score 0 · Answer 10 · answered Feb 23 '21 at 09:16

If You have already installed the dependancies , chcked the package.Json file for the react-router-dom dependancy to be sure and it still doesn't work... In this case, make sure , you import the packages from 'react-router-dom' in the index.js file.

import { BrowserRouter as Router, Switch, Route } from "react-router-dom"

score 0 · Answer 11 · answered Mar 23 '21 at 13:04

I resolved the issue when Docker and yarn involved with the error.

The key was to rebuild the Docker image after setting react-router-dom as the dev dependency, just like many answers here detail. The node_modules folder inside docker container needs to update! If your docker-compose.yaml parameter file does not remount node_modules as a volume or otherwise update it, then this answer will not work for your project. Steps:

docker-compose down in project root, or stop the daemon in Docker Desktop
yarn remove react-router-dom
yarn add --dev react-router-dom adds react-router-dom as dev dependency
docker-compose build to rebuild the Docker image
docker-compose up -d for starting the devserver with daemon

In my case I was using Docker, with create-react-app using Typescript template. I'm using docker-compose to up and down the containers with Docker daemon. If you don't use docker-compose then you need to modify the container start/stop commands accordingly.

React Router was already installed and functioning correctly (yarn start outside Docker container was not reporting any error). Docker contained frontend server was not functioning correctly.

score 0 · Answer 12 · answered May 01 '21 at 19:23

 "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "2.1.1"
  },

These are the dependencies you use in your project, make sure to install react-router-dom in to your react project.

Use npm i react-router-dom or yarn add react-router-dom to install react-router-dom in to your project.

If you use typescript in your project, you have to install @types/react-router-dom too

Use npm i @types/react-router-dom or yarn add @types/react-router-dom to install them.

Finally if you have successfully installed those libs in to your project, your package.json can be look like this,

"dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "2.1.1"
     ......
    "react-router-dom": "^x.x.x",
     .....
    "@types/react-router-dom": "^x.x.x",
  },

Failed to compile. Module not found: Can't resolve 'react-router-dom'

12 Answers12

Linked