当我在顶层使用“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);警告
由于它是实验性的，因此在某些版本中可能会被破坏