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

Question

我是 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 工作正常。

Answer 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 吗？我希望有人可以为我澄清为什么会这样?

Answer 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 全局变量。