Sign Up

Have an account? Sign In Now

Sign In

Forgot Password?

Don't have account, Sign Up Here

Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Have an account? Sign In Now

Sorry, you do not have a permission to ask a question, You must login to ask question.

Forgot Password?

Need An Account, Sign Up Here
Sign InSign Up

ErrorCorner

ErrorCorner Logo ErrorCorner Logo

ErrorCorner Navigation

  • Home
  • Contact Us
  • About Us
Search
Ask A Question

Mobile menu

Close
Ask a Question
  • Home
  • Contact Us
  • About Us
Home/ Questions/Q 944
Next
Answered
Kenil Vasani
Kenil Vasani

Kenil Vasani

  • 646 Questions
  • 567 Answers
  • 77 Best Answers
  • 26 Points
View Profile
  • 7
Kenil Vasani
Asked: December 22, 20202020-12-22T07:08:00+00:00 2020-12-22T07:08:00+00:00In: Javascript, ReactJs

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

  • 7

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.

javascriptnode.jsreact-router-domreactjs
  • 1 1 Answer
  • 57 Views
  • 0 Followers
  • 0
Answer
Share
  • Facebook

    1 Answer

    • Voted
    1. Kenil Vasani

      Kenil Vasani

      • 646 Questions
      • 567 Answers
      • 77 Best Answers
      • 26 Points
      View Profile
      Best Answer
      Kenil Vasani
      2020-12-22T07:07:26+00:00Added an answer on December 22, 2020 at 7:07 am

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

      npm install react-router-dom --save

      • 0
      • Share
        Share
        • Share on Facebook
        • Share on Twitter
        • Share on LinkedIn
        • Share on WhatsApp

    You must login to add an answer.

    Forgot Password?

    Sidebar

    Ask A Question
    • Popular
    • Kenil Vasani

      SyntaxError: invalid syntax to repo init in the AOSP code

      • 5 Answers
    • Kenil Vasani

      Homebrew fails on MacOS Big Sur

      • 3 Answers
    • Kenil Vasani

      runtimeError: package fails to pass a sanity check for numpy ...

      • 3 Answers
    • Kenil Vasani

      xlrd.biffh.XLRDError: Excel xlsx file; not supported

      • 3 Answers
    • Kenil Vasani

      create-react-app is not working since version 4.0.1

      • 2 Answers

    Explore

    • Most Answered
    • Most Visited
    • Most Voted
    • Random

    © 2020-2021 ErrorCorner. All Rights Reserved
    by ErrorCorner.com