如何在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);

警告

由於它是實驗性的，因此在某些版本中可能會被破壞