添加webpack时,React项目出现依赖错误

3

我使用以下命令安装了webpack

yarn add webpack --dev

在我的React应用程序文件夹中运行yarn start命令后

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

出现以下错误。

yarn run v1.19.0 $ react-scripts start

项目的依赖树可能存在问题。这很可能不是Create React App的bug,而是您需要在本地修复的问题。

Create React App提供的react-scripts软件包需要一个依赖项:

"webpack": "4.29.6"

不要尝试手动安装它:您的包管理器会自动安装它。但是,检测到树中更高版本的webpack:

D:\Workspace\fuel-man-ui\fuel-man-ui\node_modules\webpack (version: 4.41.0)

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

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

要解决依赖树问题,请按照以下步骤按顺序执行:

  1. 删除项目文件夹中的package-lock.json(不是package.json!)和/或yarn.lock。
  2. 删除项目文件夹中的node_modules。
  3. 从项目文件夹的package.json文件中的dependencies和/或devDependencies中删除"webpack"。
  4. 运行npm install或yarn,具体取决于您使用的软件包管理器。

在大多数情况下,这应该足以解决问题。如果这没有帮助,还有其他几件事可以尝试:

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

  2. 检查 D:\Workspace\fuel-man-ui\fuel-man-ui\node_modules\webpack 是否在您的项目目录之外。 例如,您可能会在您的主目录中意外地安装某些软件包。

  3. 在您的项目文件夹中尝试运行npm ls webpack。 这将告诉您除了预期的react-scripts之外哪个其他软件包安装了webpack。

如果没有其他方法可行,将SKIP_PREFLIGHT_CHECK=true添加到您的项目的.env文件中。这将永久禁用此检查,以防您仍要继续操作。

P.S. 我们知道此消息很长,请阅读上述步骤:) 我们希望您会发现它们很有帮助!

error Command failed with exit code 1. info Visit 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

1
由于您使用了create-react-app,webpack已自动安装。 - bamtheboozle
https://create-react-app.dev/docs/adding-a-css-modules-stylesheet - bamtheboozle
@DragoşPaulMarinescu,我只是按照这里描述的相同步骤进行操作 https://dev59.com/TVUL5IYBdhLWcg3whIS- - pappu_kutty
错误信息字面意思是“不要尝试手动安装”。 - Dominic
@Dominic 是的,没错...我已经删除了手动安装,按照你提供的链接进行操作,我的CSS模块现在可以正常工作了... - pappu_kutty
显示剩余4条评论
4个回答

3
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配置中。 - HMR
我的CSS模块不起作用了。我被告知要添加Webpack依赖才能使其正常工作。也许我应该使用Dragos建议的默认依赖项来解决问题。 - pappu_kutty
什么是“ejecting the config”?你的意思是默认的webpack配置,我要用自定义的webpack替换它吗? - pappu_kutty
1
我只是使用默认的webpack配置...我正在遵循这篇文章https://dev59.com/TVUL5IYBdhLWcg3whIS- - pappu_kutty
显示剩余2条评论

1

你应该在根目录(不是src文件夹内)创建.env文件,并添加SKIP_PREFLIGHT_CHECK=true,然后你就可以使用yarn startnpm start。它可行!


0

在文件.env中添加SKIP_PREFLIGHT_CHECK=true


3
你好,欢迎来到 Stack Overflow。为了提供有用的回答,请解释一下这个答案为什么能够解决问题。 - Jeroen Heier

0

昨天我遇到了同样的问题。在我的情况下,原来我安装了两个版本的node(一个使用brew,另一个使用下载的dmg文件)。当我删除通过brew安装的那个版本时,问题得到了解决。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接