So verwenden Sie „await“ der obersten Ebene in TypeScript Next.js

Question

Wenn ich „await“ auf der obersten Ebene verwende, so:

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

Ich erhalte die Warnung: „set Experiments.topLevelAwait true“ auf dem Terminal. Wenn ich versuche, es zu „tsconfig.json“ hinzuzufügen, funktioniert es immer noch nicht. Es heißt, dass die „experimentelle“ Eigenschaft nicht existiert.

Ich kann es in eine asynchrone Funktion einschließen, möchte es aber ohne Umbruchfunktion festlegen.

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);

警告

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