如何在TypeScript Next.js中使用顶层的"await"

Question

当我在顶层使用“await”时，如下所示：

const LuckyDrawInstance=await new web3.eth.Contract(abi)

我在终端上收到警告：“set Experiments.topLevelAwait true”。当我尝试将其添加到“tsconfig.json”时，它仍然不起作用。它说“实验”属性不存在。

我可以将它包装在异步函数中，但我想在没有包装函数的情况下设置它。

Answer 1

在撰写本文时对我有用的最新解决方案是使用 Babel 而不是 SWC，因为 Next.js 不允许自定义 SWC 配置，因此，您不能通过 允许 topLevelAwait。 swcrc 文件。

1. 将名为 @babel/plugin-syntax-top-level-await 的 Babel 插件添加到 package.json 中。

例如。

{
    "devDependencies": {
        "@babel/plugin-syntax-top-level-await": "^7.14.5"
    }
}

2. 在 package.json 所在项目的根目录中创建 .babelrc 文件。

3. 在 .babelrc 中确保包含 next/babel 预设和 topLevelAwait 插件。

例如。

{
    "presets": ["next/babel"],
    "plugins": [
        "@babel/plugin-syntax-top-level-await"
    ]
}

这是最简单的解决方案，直到 Next.js 团队允许我们包含 SWC 配置。请注意，通过这样做，您将不会获得 SWC 性能优势，因为它将被禁用以支持 Babel。

Answer 2

与 tsconfig.json 无关。您必须在 next.config.js 中设置它。新版本的next.js使用webpack5，webpack5支持顶级await。

module.exports = {
  webpack: (config) => {
    // this will override the experiments
    config.experiments = { ...config.experiments, topLevelAwait: true };
    // this will just update topLevelAwait property of config.experiments
    // config.experiments.topLevelAwait = true 
    return config;
  },
};

注意

您必须在功能组件之外使用它：

export default function Navbar() {
  // this will throw error
  // Syntax error: Unexpected reserved word 'await'.
  const provider=await customFunction()

  return (
    <section>          
    </section>
  );
}

下 13 条

相同的设置适用于“pages”和“app”目录中的“next”：“^13.1.6”。 （因为此功能是 webpack5 功能，而不是 next.js 功能）您可以使用以下示例代码对其进行测试：

const _promise = async () => {
  return new Promise((resolve, reject) => resolve(4));
};
// you might get typecsript warning
const val = await _promise();
console.log("val", val);

警告

由于它是实验性的，因此在某些版本中可能会被破坏