Javascript 未能编译。未找到模块：Can'；t解决'；react路由器dom'；

在

npm启动后

，浏览器会给出错误信息：

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

React-router dom已添加到npm中的依赖项中，React-router和React也是如此

已使用

create react app myapp

cmd行创建项目。这是在本地主机、节点服务器上运行的。我的项目文件夹中有一个api和应用程序文件夹。我试过各种各样的东西。手动更新应用文件夹中的my package.json，重新安装react router dom，删除应用文件夹中的package-lock.json并重新初始化。我的api文件夹除了节点_模块、我的api文件、route.js、config.js、index.js以及package.json和package-lock.json外，什么都没有。我已在我的应用程序文件夹中尝试了npm build命令。它只是创建了一个“build”文件夹，其中包含与我的应用程序文件夹中的公用文件夹相同的文件。我还试着运行了

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

/==========App.js文件=========
//依赖关系
从“React”导入React，{Component}；
从“react Router dom”导入{BrowserRouter as Router，Route}；
//组成部分
从“../Header/Header”导入标题；
从“../Footer/Footer”导入页脚；
从“../Pages/Home”导入主页；
从“../Pages/StudentOverview”导入StudentOverview；
从“../Pages/StudentDetails”导入StudentDetails；
从“../Pages/Management”导入管理；
从“../Pages/StudentAdd”导入StudentAdd；
从“../Exercise/Exercise”导入练习；
//包括
导入“../../public/css/kdg-fonts.css”；
导入“../../public/css/normalize.css”；
导入“../../public/css/responsive.css”；
导入“../../public/css/say my name.css”；
导入“../../public/css/style.css”；
//跑
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；
//=======appfolder/package.json文件=========
{
“姓名”：“saymyname”，
“版本”：“0.1.0”，
“私人”：没错，
“依赖项”：{
“反应”：“^16.7.0”，
“react dom”：“^16.7.0”，
“反应脚本”：“2.1.1”
},
“脚本”：{
“开始”：“反应脚本开始”，
“构建”：“反应脚本构建”，
“测试”：“反应脚本测试”，
“弹出”：“反应脚本弹出”
},
“eslintConfig”：{
“扩展”：“反应应用程序”
},
“浏览者”：[
">0.2%",
“没有死”，
“非ie通过以下步骤修复此错误。

步骤1：npm安装--保存路由器dom

步骤2:


脚本标记放在public/index.js中
我遇到了相同的问题。以下命令将解决此问题：

npm install react router dom--save
问题是，您的react项目没有react router dom模块。您可以使用以下命令进行安装和保存。只需在项目根目录中运行此命令，一切正常

npm安装--保存react路由器dom

在我的例子中，我使用Typescript，需要安装

npm i react-router-dom

及

两次安装后，错误都消失了

或

出现此错误的原因是缺少react router domnpm包。请使用上述命令安装它们。
安装“react router dom”时，您需要使用
--save
“。这将确保包作为依赖项存储在
package.json
文件中，并且当您尝试在任何其他计算机或构建服务器上构建解决方案时，它将从
package.json
文件中获取所有依赖项并安装它们

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

对于此问题“未找到模块：无法解析'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;

确保使用npm安装--保存react路由器dom而不是npm安装--保存react路由器

npm install react-router-dom 

此命令解决了我面临的相同问题。
如果您已经安装了依赖项，请检查package.Json文件以确定react router dom依赖项，但它仍然不起作用。。。
在这种情况下，请确保从index.js文件中的“react router dom”导入包

从“react Router dom”导入{BrowserRouter as Router，Switch，Route}
我解决了Docker和Thread涉及错误的问题

关键是在将react router dom设置为开发依赖项后重建Docker映像，就像这里的许多答案一样详细。如果您的
Docker compose.yaml
参数文件没有将
node\u modules
作为卷或其他WI重新安装，Docker容器中的
node\u modules
文件夹需要更新！se更新它，则此答案将不适用于您的项目。步骤：

在项目根目录中关闭docker compose
，或在docker Desktop中停止守护程序
纱线去除路由器dom
添加--dev react router dom
将react router dom添加为dev依赖项
docker compose build
重建docker映像
docker compose up-d
用于使用守护进程启动devserver
在我的例子中，我使用Docker，使用Typescript模板创建react应用程序。
我正在使用
docker-compose
使用docker-daemon上下移动容器。如果不使用
docker-compose
，则需要相应地修改容器的启动/停止命令

React路由器已安装且运行正常（
Thread start
外部Docker容器未报告任何错误）。包含Docker的前端服务器运行不正常

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

这些是您在项目中使用的依赖项，请确保安装
react-rou
//I found the following solving

// using ES6 modules

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

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

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

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

npm install react-router-dom 

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

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