When I use "await" on top-level like this:
const LuckyDrawInstance=await new web3.eth.Contract(abi)
I got a warning on the terminal: "set experiments.topLevelAwait true". When I tried to add this to "tsconfig.json", it still does not work. it says "experiments" property does not exist.
I could wrap it inside an async function but I want to set it without a wrapped function.
It is nothing to do with the tsconfig.json. You have to set it inside next.config.js. New version of next.js uses webpack5 and webpack5 supports top level 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;
},
};
NOTE
You have to use it outside the functional component:
export default function Navbar() {
// this will throw error
// Syntax error: Unexpected reserved word 'await'.
const provider=await customFunction()
return (
<section>
</section>
);
}
same setting works at "next": "^13.1.6", in both "pages" and "app" directory. (Because this feature is a webpack5 feature, not next.js feature) you can test it with this sample code:
const _promise = async () => {
return new Promise((resolve, reject) => resolve(4));
};
// you might get typecsript warning
const val = await _promise();
console.log("val", val);
Since it is experimental, it might be broken in some versions
config.experiments.topLevelAwait = true.
npx create-next-app --ts and share it on stackblitz or codesandboxI have been struggling with this for 2-3 days. Here is a solution that works. Please follow the following steps.
1. Copy paste the following in your 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. Delete your node_modules folder
3. Goto your project's root directory and reinstall all the packages using npm install command
4. Create a new file in your project's root directory and call it "next.config.js"
5. Copy paste following code in next.config.js file and save.
module.exports = { // target: 'experimental-serverless-trace', webpack: (config) => { config.experiments = config.experiments || {}; config.experiments.topLevelAwait = true; return config; }, };
