Échec de la compilation. Module introuvable: impossible de résoudre «react-router-dom»

Question

Après npm start, le navigateur donne l'erreur:

Impossible de compiler ./src/components/App/App.js Module introuvable: impossible de résoudre "react-router-dom".

React-router-dom a été ajouté aux dépendances dans npm, tout comme react-router et react.

Le projet a été créé à l'aide du create-react-app myapp ligne cmd. Il est exécuté sur un serveur de noeud localhost. J'ai un dossier api et app dans mon dossier de projet. J'ai essayé différentes choses. Mis à jour manuellement mon package.json dans le dossier de l'application, réinstallé react-router-dom, supprimez le package-lock.json dans le dossier de l'application et réinitialisez-le. Mon dossier api ne contient que node_modules, mon fichier api, route.js, config.js, index.js ainsi qu'un package.json et package-lock.json. J'ai essayé la commande npm build dans mon dossier d'application. Il crée simplement un dossier "build" qui contient les mêmes fichiers que mon dossier public dans mon dossier d'application. J'ai également essayé d'exécuter 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"
  }
}

METTRE À JOUR: npm install -S react-router-dom a résolu l'erreur.

Answer 1

Le problème est que votre projet react n'a pas de module react-router-dom. Vous pouvez l'installer et l'enregistrer à l'aide de la commande suivante. Exécutez simplement cette commande dans la racine de votre projet et tout fonctionne correctement.

npm install --save react-router-dom