Failed to compile. Module not found: Can't resolve 'react-router-dom'
Javascriptnode.jsReactjsReact Router-DomJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
I was facing the same issue. The following command will resolve it:
npm install react-router-dom --save
Solution 2 - Javascript
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.
Solution 3 - Javascript
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
Solution 4 - Javascript
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
Solution 5 - Javascript
> 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;
Solution 6 - Javascript
just install react-router-dom by using
yarn add react-router-dom
or
npm install --save react-router-dom
Solution 7 - Javascript
npm install react-router-dom
This command resolves the same issue I faced.
Solution 8 - Javascript
Use npm install react-router-dom --save
for installing it.
Solution 9 - Javascript
npm install react-router-dom --save
This will work
Solution 10 - Javascript
> 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.
Solution 11 - Javascript
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
Solution 12 - Javascript
Make sure to use npm install --save react-router-dom not npm install --save react-router
Solution 13 - Javascript
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"
Solution 14 - Javascript
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 Desktopyarn remove react-router-dom
yarn add --dev react-router-dom
adds react-router-dom as dev dependencydocker-compose build
to rebuild the Docker imagedocker-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.
Solution 15 - Javascript
"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",
},
Solution 16 - Javascript
if you are using yarn instead of npm, this will help, it solved the same problem for me.
yarn add react-router-dom --save