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

admin管理员组

文章数量:1134589

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"
  }
}

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"
  }
}

• javascript
• node.js
• reactjs
• react-router-dom

Share Improve this question Follow edited Feb 8, 2023 at 8:59 Tomerikoo 19.4k1616 gold badges5353 silver badges6767 bronze badges asked Dec 24, 2018 at 13:18 DokmeDokme 1,37533 gold badges1111 silver badges1010 bronze badges 3

• 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 Commented Dec 24, 2018 at 13:49
• 1 @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 Commented Dec 24, 2018 at 14:00
• In my case, I was getting the error because I was importing components from react-router-dom in both app.js and index.js and was not using one of them. removing the imports which I wasn't using solved the issue. – Faheim Arslan Commented Feb 3, 2022 at 16:10

Add a comment  | 

12 Answers 12

Sorted by: Reset to default 169

The following command will resolve it:

npm install react-router-dom --save

You can use -S (capitalized) instead of --save if you want; they both do the same thing.

In my case I use Typescript and I needed to install

npm i react-router-dom

AND

npm i @types/react-router-dom

Would also recommend closing and restarting your IDE after installing both

After restarting, both installations errors are gone.

This error will be fixed by following these steps:

1. npm install --save react-router-dom

2. Put this in public/index.js:

   <script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
   

Just install react-router-dom by using:

yarn add react-router-dom

---

^{or npm install --save react-router-dom as mentioned in this answer.}

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;

Use the following command.

npm i react-router-dom

If not working.

npm i react-router-dom --save

Or.

npm i react-router-dom --force

If you are using yarn instead of npm, this will help:

yarn add react-router-dom --save

To install and configure react router. You first need to install the react-router-dom. Type the below command and run in your terminal,

npm i react-router-dom

If you are using react-router-dom v6. Then use the below code to configure react-router-dom along with layout,

App.jsx:

import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './Components/Home'
import About from './Components/About'
import Layout from './Components/Layout'


function App() {
  return (
    <div className="App">

      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route path="/" element={<Home />} />
            <Route path="about" element={<About />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

After configuring the react router in App.jsx. I am creating 3 components Home, About and Layout. Home and About are regular components and Layout component is to handle the Layout part in react-router-dom using Outlet.

Layout.jsx

import { Outlet, Link } from 'react-router-dom'
export default function Layout() {
    return (
        <>

            <Link to="/">Home</Link>&nbsp;&nbsp;&nbsp;
            <Link to="/about">About</Link>
            <Outlet />
        </>
    )
}

Home.jsx

export default function Home() {
    return (
        <>
            <p>This is Home</p>
        </>
    )
}

About.jsx

export default function About() {
    return (
        <>
            <p>This is About Us</p>
        </>
    )
}

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:

1. docker-compose down in project root, or stop the daemon in Docker Desktop
2. yarn remove react-router-dom
3. yarn add --dev react-router-dom adds react-router-dom as dev dependency
4. docker-compose build to rebuild the Docker image
5. 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.

 "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",
  },

If You have already installed the dependencies, checked the package.Json file for the react-router-dom dependency 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"

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

本文标签： javascriptFailed to compile Module not found Can39t resolve 39reactrouterdom39Stack Overflow