编译失败.找不到模块:无法解析“react-router-dom" [英] Failed to compile. Module not found: Can't resolve 'react-router-dom'

问题描述

npm start后，浏览器报错:

无法编译 ./src/components/App/App.js 模块未找到:无法解析react-router-dom".

Failed to compile ./src/components/App/App.js Module not found: Can't resolve 'react-router-dom'.

React-router-dom 已添加到 npm 中的依赖项中，因此也添加了 react-router 和 react.

React-router-dom has been added to the dependencies in npm and so has react-router and react.

已使用 create-react-app myapp cmd 行创建项目.这是在本地主机节点服务器上运行的.我的项目文件夹中有一个 api 和 app 文件夹.我尝试了各种各样的事情.手动更新我的app文件夹内的package.json，重新安装react-router-dom，删除app文件夹中的package-lock.json并重新初始化.我的 api 文件夹只包含 node_modules、我的 api 文件、route.js、config.js、index.js 以及 package.json 和 package-lock.json.我在我的应用程序文件夹中尝试了 npm build 命令.它只是创建一个build"文件夹，其中包含与我的应用程序文件夹中的公共文件夹相同的文件.我也试过运行 yarn add react-router-dom.

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

</路由器>);}}导出默认应用程序；//==========appfolder/package.json 文件=========={"name": "saymyname",版本":0.1.0"，私人":真的，依赖关系":{反应":^ 16.7.0"，"react-dom": "^16.7.0",反应脚本":2.1.1"},脚本":{开始":反应脚本开始"，"build": "react-scripts build","test": "反应脚本测试",弹出":反应脚本弹出"},eslintConfig":{扩展":反应应用程序"},浏览器列表":[">0.2%",没死"，"不是即 <= 11",不是 op_mini 全部"],开发依赖":{"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"}}

<块引用>

更新:npm install -S react-router-dom 解决了错误.

推荐答案

我遇到了同样的问题.以下命令将解决它:

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

npm install react-router-dom --save

这篇关于编译失败.找不到模块:无法解析“react-router-dom"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！