难以处理错误：缩小的React错误#321-ReactJS

Question

我正在构建React应用程序，突然出现以下错误：

错误：缩小的反应错误#321;访问 https://reactjs.org/docs/error-decoder.html?invariant=321 以获取完整消息，或使用未缩小的开发环境获取完整错误和其他有用的警告。

现在，我应用程序只显示了位于App.js中的绿色圆圈按钮，React中构建的网站的其余部分什么也没有显示(白页)。

当我尝试将一些.mp4视频上传到服务器时，更新代码后立即发生这种情况。我访问了 https://reactjs.org/docs/error-decoder.html/?invariant=321 以获取完整的消息详细信息，并检查了3个可能的原因：

1. 您可能有不匹配的React版本和渲染器（例如React DOM）
2. 你可能违反了钩子的规则
3. 您可能在同一个应用程序中拥有多个React副本

我验证了这3个原因中的每一个，并且似乎很好。

你以前处理过类似的事情吗？你是如何解决的？你知道如何调试错误吗？

我感谢任何帮助，如果您需要有关代码或问题的更多详细信息，请询问。

Answer 1

事情是你的库使用了< code>sample-testing，它是以一种非常奇怪的方式构建的，特别是< code>TButton组件，它在模块内包含了< code>React v16.8.6，但它使用了< code>commonjs样式，如下所示:

module.exports = {}

// React has been included here which is very wrong way
/** @license React v16.8.6
 * react.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var r=n(4)
// ...

如果编写库来导出React组件，您只需将它们构建为具有通用js样式的单独文件。不要像上面那样包含应该包含在使用您的库的父应用程序中的React。

您构建的组件看起来很像这样：

TButton.js

const TButton = (props) => {
  // ...
}

exports.default = TButton;

Answer 2

经过大量调试，我发现这个问题是由库mdbreact的某些函数引起的

// package.json

"dependencies": {
   ...
   "mdbreact": "git+https://oauth2:[e-mail]/mdb/react/re-pro.git"
   ...
}

我有专业版的库，默认情况下，它会自动更新。我使用的是4.27.0版本，一切正常，然后当他们将库更新到新的5.0.0版本时，我的应用程序爆炸了。这很难调试，因为只发生在生产端。

我解决了将库降级到4.27.0版本的问题，只是在依赖项末尾添加#4.27.0

// package.json

"dependencies": {
   ...
   "mdbreact": "git+https://oauth2:[e-mail]/mdb/react/re-pro.git#4.27.0"
   ...
}

我将保留这个版本，直到他们提交这些特定功能的修复。感谢@tmhhao2005给了我研究的指南。希望它能帮助其他有类似错误的人！