當我在頂層使用「await」時，如下所示：
const LuckyDrawInstance=await new web3.eth.Contract(abi)
我在終端機上收到警告：「set Experiments.topLevelAwait true」。當我嘗試將其添加到“tsconfig.json”時，它仍然不起作用。它說“實驗”屬性不存在。
我可以將它包裝在非同步函數中，但我想在沒有包裝函數的情況下設定它。
在撰寫本文時對我有用的最新解決方案是使用 Babel 而不是 SWC，因為 Next.js 不允許自訂 SWC 配置，因此，您不能透過 允許 topLevelAwait。 swcrc 檔案。
允許 topLevelAwait。 swcrc
topLevelAwait
@babel/plugin-syntax-top-level-await
package.json
例如。
{ "devDependencies": { "@babel/plugin-syntax-top-level-await": "^7.14.5" } }
在 package.json 所在專案的根目錄中建立 .babelrc 檔案。
.babelrc
在 .babelrc 中確保包含 next/babel 預設和 topLevelAwait 外掛。
next/babel
{ "presets": ["next/babel"], "plugins": [ "@babel/plugin-syntax-top-level-await" ] }
這是最簡單的解決方案，直到 Next.js 團隊允許我們包含 SWC 配置。請注意，透過這樣做，您將不會獲得 SWC 效能優勢，因為它將被停用以支援 Babel。
與 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> ); }
相同的設定適用於「pages」和「app」目錄中的「next」：「^13.1.6」。 （因為此功能是 webpack5 功能，而不是 next.js 功能）您可以使用以下範例程式碼對其進行測試：
webpack5
const _promise = async () => { return new Promise((resolve, reject) => resolve(4)); }; // you might get typecsript warning const val = await _promise(); console.log("val", val);
由於它是實驗性的，因此在某些版本中可能會被破壞
在撰寫本文時對我有用的最新解決方案是使用 Babel 而不是 SWC，因為 Next.js 不允許自訂 SWC 配置，因此，您不能透過
允許檔案。topLevelAwait。 swcrc@babel/plugin-syntax-top-level-await的 Babel 外掛程式加入到package.json中。例如。
{ "devDependencies": { "@babel/plugin-syntax-top-level-await": "^7.14.5" } }在
package.json所在專案的根目錄中建立.babelrc檔案。在
.babelrc中確保包含next/babel預設和topLevelAwait外掛。例如。
{ "presets": ["next/babel"], "plugins": [ "@babel/plugin-syntax-top-level-await" ] }這是最簡單的解決方案，直到 Next.js 團隊允許我們包含 SWC 配置。請注意，透過這樣做，您將不會獲得 SWC 效能優勢，因為它將被停用以支援 Babel。
與 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);警告
由於它是實驗性的，因此在某些版本中可能會被破壞