错误：顶级等待实验未启用（设置experiments.topLevelAwait：true以启用它）React-Intl进行翻译

Question

面临以下构建问题：

Module parse failed: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)

File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
Error: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enabled it)

请为此提供一些解决方案吗？

Answer 1

使用异步导出模块时出现此错误。只需将其添加到 webpack.config.js 文件中的 module.exports 对象中即可。

experiments: {
  topLevelAwait: true
}

您还可以在 Webpack 文档中阅读有关实验选项的信息。https://webpack.js.org/configuration/experiments/

Answer 2

这是针对来自 Next.js源代码的解决方法

/** @type {import("next").NextConfig} */
module.exports = {
  experimental: { appDir: true },
  webpack(config) {
    config.experiments = { ...config.experiments, topLevelAwait: true }
    return config
  },
}

Answer 3

您可以在 webpack 配置中启用它。

如果您创建了 React 应用程序，则npx create-react-app my-app必须安装CRACO来覆盖您的 webpack 配置。

安装后，在 craco.config.js 中将 topLevelAwait 设置为 true：

module.exports = {
  webpack: {
    configure: {
      experiments: {
        topLevelAwait: true,
      },
    },
  },
};

运行一下npm start，错误就消失了。