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.

Answer 1

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

npm install react-router-dom --save