React 16.14.0：未捕获错误 ReferenceError：未定义导出

Posted 2023-02-22

【中文标题】React 16.14.0：未捕获错误 ReferenceError：未定义导出

【英文标题】：React 16.14.0: Error was not caught ReferenceError: exports is not defined

【发布时间】：2021-02-28 16:19:27

【问题描述】：

我是 next-translate 库的作者，我正在开发一个实验版本，我在 React 16.14.0 中遇到 错误，我不明白为什么会这样. 将 React 升级到版本 17 就可以正常工作了，但我不想强迫所有使用我的库的新版本的人迁移他们的 React 版本。

我创建了一个可重现的错误示例： https://github.com/aralroca/next-translate-error-reproduction

为了重现这个问题：

克隆此存储库 运行yarn && yarn dev 打开localhost:3000 打开开发工具

Error was not caught ReferenceError: exports is not defined

我的库的预发布代码在这里：

https://github.com/vinissimus/next-translate/tree/1.0.0-experimental.14

tsconfig.json

  "compilerOptions": 
    "strict": false,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "removeComments": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "declaration": true,
    "lib": ["esnext", "dom"],
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./lib/esm"
  ,
  "include": ["./src"]

tsconfig-cjs.json

  "extends": "./tsconfig.json",
  "compilerOptions": 
    "module": "CommonJS",
    "outDir": "./lib/cjs",
    "declaration": false
  

这是封装代码：

https://www.runpkg.com/?next-translate@1.0.0-experimental.14

如果有人知道这个错误来自哪里并且可以帮助我，我将非常感激！几天来我一直在尝试解决它，但我有点迷茫，因为我不知道为什么会这样......谢谢！

注意：看起来它只发生在开发中，yarn build && yarn start 工作正常。

【问题讨论】：

你的 Nodejs 版本是多少？我尝试重现您的步骤，但它不会在 devtool 中引发任何错误。我的节点版本是 12.19

我有 Node v14.13.1

是的，我认为操作系统不会发生这种情况。因此，您可以在此处访问此问题，并尝试使用最佳答案来解决它。 ***.com/questions/43042889/…

顺便说一下，我使用的是 Typescript 最新版本。因此，您可以在这里查看另一个答案：***.com/questions/42497479/…。希望以上对你有帮助

我可以在 Ubuntu 16 操作系统中重现该问题。

【参考方案1】：

我已经修好了，但老实说，我不明白为什么......让我们看看是否有人可以给我解释一下！

我在调试时发现是我的库代码中的某些东西导致 TypeScript 编译错误。所以，我逐行取消注释，直到我看到这行有什么问题：

import App from 'next/app'

// Inside getInitialProps wrapper...
App.getInitialProps() // THIS LINE

似乎在评论App.getInitialProps() 时，TypeScript 编译得很好。幸运的是，我已经能够在我的库中省去这行代码，现在有了预发布版 1.0.0-experimental.15，它似乎与 React 16 配合得很好。

我真的不明白为什么会发生这种情况，可能是因为我将 Next.js 作为 peerDependency 吗？我希望有人可以为我澄清为什么会这样?

【讨论】：

有趣的案例，那行在哪里？你能把链接发到源代码位置吗？

【参考方案2】：

很高兴您发现了错误，这是您的案例的解释。

我们比较一下两个版本的编译结果：

在两个文件中查看 ln:54 1.0.0-experimental.14 1.0.0-experimental.15.

var react_1 = __importDefault(require("react"));

// The key different is the exclusion of this line:
var app_1 = __importDefault(require("next/app"));

var I18nProvider_1 = __importDefault(require("./I18nProvider"));
var loadNamespaces_1 = __importDefault(require("./loadNamespaces"));

因为你不再使用 App.getInitialProps()，所以 import App from 'next/app' 也被 TypeScript 删除了。真正的问题在于next/app 模块。

根据面包屑，我们看到 next/app 简单的再导出 next/dist/pages/_app：

module.exports = require('./dist/pages/_app')

关于./dist/pages/_app的内容，去看看这个link。它将exports 引用为无处不在的全局变量，这导致了问题：Error was not caught ReferenceError: exports is not defined

问题很明显，next/dist/pages/_app.js 的代码包含在捆绑到网页的 JS 代码中，而没有被 webpack 正确转译。

但在此之后我无法提供进一步的帮助，因为我不熟悉 next.js 堆栈。猜猜你需要调整 webpack 配置来处理 exports 全局变量。

【讨论】：

好的，我明白了。 next/app 在 Next.js 环境中运行良好，因为它总是通过 webpack，但是如果我想从第三方库中使用它，作为 peerDependency，那么它不会通过 webpack 并且不能很好地解决这个问题。很高兴知道！非常感谢您抽出宝贵时间来做这件事！