当我在顶层使用“await”时,就像这样:
const LuckyDrawInstance=await new web3.eth.Contract(abi)
我在终端上收到了一个警告:“set experiments.topLevelAwait true”。当我尝试将其添加到“tsconfig.json”中时,它仍然无法工作。它提示“experiments”属性不存在。
我可以将其包装在async函数中,但我希望不使用包装函数来设置它。
当我在顶层使用“await”时,就像这样:
const LuckyDrawInstance=await new web3.eth.Contract(abi)
我在终端上收到了一个警告:“set experiments.topLevelAwait true”。当我尝试将其添加到“tsconfig.json”中时,它仍然无法工作。它提示“experiments”属性不存在。
我可以将其包装在async函数中,但我希望不使用包装函数来设置它。
这与tsconfig.json无关。您需要在next.config.js中进行设置。Next.js的新版本使用webpack5,而webpack5支持顶级等待。
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 的功能。您可以使用此示例代码进行测试:
const _promise = async () => {
return new Promise((resolve, reject) => resolve(4));
};
// you might get typecsript warning
const val = await _promise();
console.log("val", val);
由于这是一个实验性功能,在某些版本中可能存在故障问题。
{
"devDependencies": {
"@babel/plugin-syntax-top-level-await": "^7.14.5"
}
}
在项目根目录下创建一个.babelrc
文件,它应该和package.json
文件处于同一级目录。
在.babelrc
文件中,确保包含next/babel
预设和topLevelAwait
插件。
例如:
{
"presets": ["next/babel"],
"plugins": [
"@babel/plugin-syntax-top-level-await"
]
}
这是最简单的解决方案,直到Next.js团队允许我们包含SWC配置。请注意,通过这样做,您将不会获得SWC性能优势,因为它将被禁用以支持Babel。
next/font
包了。 - airtonix我已经苦恼了2-3天。这是一个可行的解决方案,请按照以下步骤进行。
1. 将以下内容复制粘贴到您的 package.json 中
{
"name": "projectname",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "mocha",
"dev": "next dev"
},
"author": "",
"license": "ISC",
"dependencies": {
"@truffle/hdwallet-provider": "^2.0.1",
"fs-extra": "^10.0.0",
"ganache-cli": "^6.12.2",
"mocha": "^9.1.4",
"next": "^12.0.8",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"solc": "^0.8.9",
"web3": "^1.7.0",
"@babel/plugin-syntax-top-level-await": "^7.14.5"
},
"devDependencies": {
"@babel/plugin-syntax-top-level-await": "^7.14.5"
}
}
2. 删除你的node_modules
文件夹
3. 进入你的项目根目录并使用npm install
命令重新安装所有包
4. 在你的项目根目录中创建一个名为"next.config.js"
的新文件
5. 将以下代码复制粘贴到next.config.js
文件中并保存。
module.exports = {
// target: 'experimental-serverless-trace',
webpack: (config) => {
config.experiments = config.experiments || {};
config.experiments.topLevelAwait = true;
return config;
},
};