当使用React时，执行npm start命令时，遇到了在node_modules中找不到模块的问题，下面是解决的方法（使用create-react-app）

2 年 ago

文, 翔

2 minutes

这次在React项目中，在进行React版本从17升级到18时遇到了问题。
虽然有一种方法是执行eject命令来更改配置文件，但这种方法已经不推荐使用，并且存在无法恢复的风险。
所以我们采取了覆盖配置文件的方法。

最后得出的结论是

手动安装软件包，重写 webpack.config.js 文件，以便进行设置

在出现错误之前所做的事情。

升级其他相关的依赖包

也许跟2有关的是react-scripts？
看起来react-scripts在内部使用webpack和babel，为开发服务器的启动和构建等提供了便利。

错误的原因

webpackのver4からver5に変わったタイミングで破壊的変更が入った
簡単に言うと今まで標準搭載されていたものがなくなったようです…
Webpack 5では、デフォルトでNode.jsのコアモジュールのポリフィルが含まれなくなったため、これらのエラーが発生しているみたいです。
ポリフィル：Web開発で聞くポリフィル(polyfill)とは？

今回のエラーメッセージ

ERROR in ./node_modules/labelmake/dist/labelmake.min.js 3:98-113
Module not found: Error: Can't resolve 'zlib' in 'パス/ファイル名'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
	- install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "zlib": false }

要求将“明确设置是否安装或使用”的内容用中文翻译为一个选项:
我希望你明确设置是否要安装，并且使用。根据命名规则，这个设置文件应该为 webpack.config.js。

堵塞的要点

正如前面提到的，您将被要求编辑设置文件，但在这里出现问题。
找不到“webpack.config.js”…
使用create-react-app启动React项目时，似乎会隐藏webpack的设置文件。
顺便说一下，webpack的设置文件位于以下路径。

/node_modules/react-scripts/config/webpack.config.js

在网络上搜索时，可以找到很多关于编辑webpack.config.js的解决方法，但无法通过npm install命令来编辑生成的node_modules目录下的内容。
此外，仅安装包也不能解决错误问题。
※根据模块的不同，有些问题可能会得到解决。

应对

在这个案例中，我们通过安装包并覆盖webpack.config.js文件来解决了问题。

安装

首先根据错误信息安装所需的软件包。在这种情况下，由于错误信息中显示了”install ‘browserify-zlib'”，所以我们将进行安装。

# yarnの場合
yarn add browserify-zlib
# npmの場合
npm i browserify-zlib

覆盖设置文件

安装软件包

覆盖设置文件需要两个必要的包，这些包仅在开发环境中使用，因此附加了dev选项。

customize-cra

# yarnの場合
yarn add react-app-rewired customize-cra --dev
# npmの場合
npm install react-app-rewired customize-cra --save-dev

修改package.json

# 修正前
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
# 修正後
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",

创建文件

在项目的根目录下，创建一个配置文件，用于覆盖设置文件。
这个配置文件应该与 package.json位于相同的层级。

# ファイル名
config-overrides.js

我会写下覆盖设置的描述。

module.exports = function override(config, env) {
    config.resolve.alias = {
      ...config.resolve.alias,
      zlib: require.resolve('browserify-zlib')
      // 他にもあれば続けて記述
      // 以下は例
      // stream: require.resolve('stream-browserify'),
      // assert: require.resolve('assert/'),
      // buffer: require.resolve('buffer/'),
      // util: require.resolve('util/')
    };
    return config;
  };

这里的处理已经完成。
React-App-Rewired的官方文件在这里：react-app-rewired

最终，

若 webpack 的配置文件（webpack.config.js）不存在，则可以通过相同的步骤覆盖配置文件。

由于很多人认为不要使用create-react-app，所以如果要启动一个新项目的话，最好避免使用它…
※似乎无法进行灵活的配置。

由于对web开发的了解不够深入，可能存在错误的地方。
如果有疏漏之处，请指正，我将不胜感激。