编译失败。找不到模块：无法解析“ react-router-dom”

时间：2018-12-24 13:18:50

标签： javascript node.js reactjs react-router-dom

npm start之后，浏览器给出错误：

  

无法编译./src/components/App/App.js找不到模块：无法解析“ react-router-dom”。

React-router-dom已添加到npm中的依赖项中，因此react-router和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。

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

更新：npm install -S react-router-dom解决了该错误。

14 个答案:

答案 0 :(得分：7)

就我而言，我使用Typescript，我需要安装

npm i react-router-dom

AND 

npm i @types/react-router-dom

两个安装错误均消失之后。

答案 1 :(得分：2)

使用 Boolean[] boxedArray = {true, false, false}; 进行安装。

答案 2 :(得分：1)

我面临着同样的问题。以下命令将解决该问题：

npm install react-router-dom --save

答案 3 :(得分：1)

问题是，您的react项目没有react-router-dom模块。您可以在以下命令的帮助下安装并保存它。只需在项目根目录中运行此命令，一切正常。

npm install --save react-router-dom

答案 4 :(得分：0)

通过以下步骤解决此错误。
Step.1： npm install --save react-router-dom
Step.2： <script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
 放在 public / index.js

中的脚本标签

答案 5 :(得分：0)

npm i react-router-dom

或 

npm install react-router-dom --save

发生此错误是因为缺少 react-router-dom npm软件包。使用上面的cmd安装它们。

答案 6 :(得分：0)

在安装“ react-router-dom”时需要使用--save。这将确保程序包作为依赖项存储在package.json 文件中，并且当您尝试在任何其他计算机或构建服务器上构建解决方案时，它将从package.json文件中获取所有依赖项并进行安装

如果要在全新计算机上安装所有依赖项，请运行命令-npm install

答案 7 :(得分：0)

对于此问题“找不到模块：无法解决'react-router-dom' 在” 

//I found the following solving

// using ES6 modules

import { BrowserRouter, Route, Link } from "react-router-dom";

如果它不起作用，那么您必须使用我在CommonJS模块中使用的以下内容

const BrowserRouter = require("react-router-dom").BrowserRouter;

const Route = require("react-router-dom").Route;

const Link = require("react-router-dom").Link;

答案 8 :(得分：0)

确保使用npm install --save react-router-dom而不是npm install --save react-router

答案 9 :(得分：0)

npm install react-router-dom

这个命令解决了我遇到的同样问题。

答案 10 :(得分：0)

如果您已经安装了依赖项，请检查 react-router-dom 依赖项的 package.Json 文件以确保它仍然不起作用... 在这种情况下，请确保从 index.js 文件中的“react-router-dom”导入包。

从“react-router-dom”导入{ BrowserRouter as Router, Switch, Route }

答案 11 :(得分：0)

当 Docker 和 yarn 涉及错误时，我解决了这个问题。

关键是在将 react-router-dom 设置为 dev 依赖后重建 Docker 镜像，就像这里的许多答案一样详细。 docker 容器内的 node_modules 文件夹需要更新！如果您的 docker-compose.yaml 参数文件没有将 node_modules 重新挂载为卷或以其他方式更新它，那么此答案将不适用于您的项目。步骤：

  1. docker-compose down 在项目根目录中，或在 Docker Desktop 中停止守护进程
  2. yarn remove react-router-dom
  3. yarn add --dev react-router-dom 添加 react-router-dom 作为开发依赖
  4. docker-compose build 重建 Docker 镜像
  5. docker-compose up -d 用于使用守护进程启动开发服务器

就我而言，我使用 Docker，create-react-app 使用 Typescript 模板。 我正在使用 docker-compose 通过 Docker 守护程序来启动和关闭容器。如果不使用 docker-compose，则需要相应地修改容器启动/停止命令。

React Router 已安装并正常运行（Docker 容器外的 yarn start 未报告任何错误）。 Docker 包含的前端服务器无法正常运行。

答案 12 :(得分：0)

 "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-scripts": "2.1.1"
  },

这些是您在项目中使用的依赖项，请确保将 react-router-dom 安装到您的 React 项目中。

使用 npm i react-router-dom 或 yarn add react-router-dom 将 react-router-dom 安装到您的项目中。

如果您在项目中使用 typescript，则还必须安装 @types/react-router-dom

使用 npm i @types/react-router-dom 或 yarn add @types/react-router-dom 安装它们。

最后，如果您已成功将这些库安装到您的项目中，您的 package.json 可以如下所示，

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

答案 13 :(得分：0)

如果您使用 yarn 而不是 npm，这会有所帮助，它为我解决了同样的问题。

yarn 添加 react-router-dom --save

相关问题
最新问题