无法更新反应脚本

Question

我有一个使用 create-react-app 创建的 react 应用程序，并且正在使用 react-scripts 版本 3.4.2。该应用程序运行良好，但是当我对它运行 eslint 时，我收到许多无效的 no-unused-vars 错误。无效是指当我转到文件时，实际上正在使用该变量。

基于this answer，问题似乎与@typescript-eslint/parser 和@typescript-eslint/eslint-plugin 有关。所以我继续在我的应用程序上执行npm list @typescript-eslint/parser @typescript-eslint/eslint-plugin，这就是我得到的：

myapp@0.1.0 /Users/diego/myapp/client
└─┬ react-scripts@3.4.2
  ├─┬ @typescript-eslint/eslint-plugin@2.34.0
  │ └── @typescript-eslint/parser@2.34.0 deduped
  ├── @typescript-eslint/parser@2.34.0
  └─┬ eslint-config-react-app@5.2.1
    ├── @typescript-eslint/eslint-plugin@2.34.0 deduped
    └── @typescript-eslint/parser@2.34.0 deduped

正如所见，所有出现的两个潜在冲突库都包含在 react-scripts 应用程序中，这就是我尝试更新它的原因。

我尝试更新到 4.0.3，当我这样做时，eslint 开始正常工作（那些不正确的 no-unused-vars 消失了）但我的应用程序没有响应（我点击不同的按钮和/或链接，但没有任何反应） .更新后我在控制台中看到的唯一错误是这个：

Uncaught ReferenceError: process is not defined
    at Object.4043 (<anonymous>:2:13168)
    at r (<anonymous>:2:306599)
    at Object.8048 (<anonymous>:2:9496)
    at r (<anonymous>:2:306599)
    at Object.8641 (<anonymous>:2:1379)

我正在搜索这个错误，我找到了this question。错误可能与开发人员所描述的不同，但通读答案后，我看到其中许多人指出反应脚本是根本原因，这与我的情况相符。

我尝试了该问题中的一些解决方案，特别是 this answer 的方法 1（我没有尝试方法 2，因为我不确定添加 craco 是否是我想要的）以及 this other answer 的解决方案，但是它们不起作用。

我也尝试更新到 react-scripts 版本 5，但出现很多错误。

是否有人面临这个问题，或者至少有一些线索可以帮助我？

提前致谢。

Answer 1

您分享的错误消息似乎与 react-error-overlay 的错误有关。

react-scripts4.0.3。使用react-error-overlay 6.0.9。但是 6.0.10 被标记为补丁，所以 npm 使用 6.0.10 而不是 6.0.9，但是 6.0.10 与 6.0.9 不兼容。

另一方面，react-scripts 5 不使用react-error-overlay，但可能会导致您的其他软件包发生重大更改，从而导致其他错误。

您可以在 CRA 存储库的这些问题中找到有关 react-error-overlay 错误的更多信息：

• Hot Reload Fails, DOM adds an additional iframe containing entire contents of the html DOM element #11880
• Is this the bug of react-error-overlay? #11773
• v5 Regression react-error-overlay build - Uncaught ReferenceError: process is not defined #11771

这是react-scripts 4.0.3 的可能解决方案：

1. 在您项目的package.json 文件中：

• 在dependencies 中，将react-scripts 版本设置为4.0.3。
• 在dependencies 下，在resolutions 中，添加react-error-overlay 6.0.9。
• 在devDependencies 中，添加react-error-overlay 6.0.9。

"dependencies": {
  ...
​  "react-scripts": "4.0.3",
  ...
},
"resolutions": {
  ​"react-error-overlay": "6.0.9"
},
...
"devDependencies": {
  ...
  "react-error-overlay": "6.0.9",
  ...
}

1. 删除项目的node_modules 文件夹和package-lock.json 文件。

2. 运行npm install。

3. 运行npm install react-error-overlay@6.0.9。