添加webpack时反应项目依赖错误答案

【问题标题】：React project dependency error while adding webpack添加webpack时反应项目依赖错误
【发布时间】：2020-02-02 14:47:20
【问题描述】：

我已经用下面的命令安装了 webpack

yarn add webpack --dev

在我的 react app 文件夹中运行 yarn start 命令后

D:\Workspace\fuel-man-ui\fuel-man-ui>yarn start

出现以下错误。

yarn run v1.19.0 $ react-scripts start

项目依赖树可能有问题。它是可能不是 Create React App 中的错误，而是您需要修复的问题本地。

Create React App 提供的 react-scripts 包需要一个依赖：

“webpack”：“4.29.6”

不要尝试手动安装它：您的包管理器会这样做自动地。但是，检测到不同版本的 webpack 在树的更高处：

D:\Workspace\fuel-man-ui\fuel-man-ui\node_modules\webpack（版本： 4.41.0)

已知手动安装不兼容的版本会导致难以调试的问题。

如果您希望忽略此检查，请添加 SKIP_PREFLIGHT_CHECK=true 到项目中的 .env 文件。那将永久禁用此消息，但您可能会遇到其他问题。

要修复依赖关系树，请尝试完全按照以下步骤操作顺序：

删除项目文件夹中的 package-lock.json（不是 package.json！）和/或 yarn.lock。

删除项目文件夹中的 node_modules。

从项目文件夹的 package.json 文件中的依赖项和/或 devDependencies 中删除“webpack”。

运行 npm install 或 yarn，具体取决于您使用的包管理器。

在大多数情况下，这应该足以解决问题。如果这有没有帮助，您可以尝试其他一些方法：

如果您使用 npm，请安装 yarn (http://yarnpkg.com/) 并使用它重复上述步骤。这可能会有所帮助，因为 npm 已知包提升问题，这些问题可能会在未来的版本中得到解决。

检查 D:\Workspace\fuel-man-ui\fuel-man-ui\node_modules\webpack 是否在外面你的项目目录。例如，您可能不小心在主文件夹中安装了一些东西。

尝试在您的项目文件夹中运行 npm ls webpack。这将告诉您安装了 webpack 的其他包（除了预期的 react-scripts）。

如果没有其他帮助，请将 SKIP_PREFLIGHT_CHECK=true 添加到 .env 文件在你的项目中。这将永久禁用此预检检查以防万一你想继续。

附：我们知道这条消息很长，但请阅读上面的步骤 :-) 我们希望它们对您有所帮助！

error 命令失败，退出代码为 1。 info 访问 https://yarnpkg.com/en/docs/cli/run 获取相关文档命令。

i have deleted node_modules from my project and devdependencies, also i have removed global node_modules and cache. still getting same error.

我跑了npm ls webpack 并来到了树下

fuel-man-ui@0.1.0 D:\Workspace\fuel-man-ui\fuel-man-ui
+-- react-scripts@3.0.1
| `-- webpack@4.29.6
|   `-- webpack@4.41.0  extraneous
`-- webpack@4.41.0

npm ERR! extraneous: webpack@4.41.0 D:\Workspace\fuel-man-ui\fuel-man-ui\node_modules\react-scripts\node_modules\webpack\node_modules\webpack

【问题讨论】：

从你使用的日志中create-react-app，它与 webpack 捆绑在一起......你为什么要添加..webpack？如果您阅读它，它实际上会在日志中为您提供原因：不要尝试手动安装它：您的包管理器会自动安装。但是，在树的较高位置检测到不同版本的 webpack：
没有 webpack 不存在，我的 css 模块没有 webpack 就无法工作
webpack 是自动安装的，因为你使用了 create-react-app..
我是否需要在 devdependency 中添加 webpack 才能使 css 模块工作？
create-react-app.dev/docs/adding-a-css-modules-stylesheet

标签： node.js reactjs npm webpack

【解决方案1】：

Create React App 提供的 react-scripts 包需要一个依赖：

“webpack”：“4.29.6”

不要尝试手动安装：您的包管理器会这样做自动地。但是，检测到不同版本的 webpack 在树的更高处：

在项目根目录中删除 node_modules 和 yarn.lock。在 package.json 中从依赖项中移除 webpack 并再次运行 yarn。

如果你想为此项目修改 webpack.config，你可以从这里运行yarn eject，你负责 webpack.config，因此更新 react 脚本会更加困难。

如果你不想对 webpack.config 负责，你可以尝试使用 react-app-rewired 这篇文章是 here

【讨论】：

你的意思是 webpack 是默认安装的？无需显式安装 webpack。但我的 css 模块无法正常工作。安装了默认 webpack
@pappu_kutty 如果您只想添加一个模块，您可以使用 rewire 将模块添加到 rewire 配置中。
我的 css 模块不工作.. 我被告知添加 webpack 依赖项以使其工作......也许我应该使用 Dragos 建议的默认依赖项
@pappu_kutty 这将是最简单的解决方案。但是如果你真的需要修改 webpack.config，你可以在弹出配置之前选择 react-app-rewired。
我只是使用默认的 webpack 配置...我正在关注这篇文章 stackoverflow.com/questions/50234890/…

【解决方案2】：

您应该在根目录（不在src 文件夹内）创建.env 文件并添加SKIP_PREFLIGHT_CHECK=true 然后你可以使用yarn start 或npm start。有效！

【讨论】：

【解决方案3】：

昨天我遇到了同样的问题。就我而言，事实证明，我安装了两个node（一个使用brew，一个使用下载的dmg 文件）。当我删除通过 brew 安装的那个时，它有所帮助。

【讨论】：

【解决方案4】：

添加SKIP_PREFLIGHT_CHECK=true的文件.env

【讨论】：

嗨，欢迎来到堆栈溢出。要获得有用的答案，请解释为什么这是问题的答案。