how can I use top level “await” in typescript next.js

by

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>
  );
}

Next 13

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);

Warning

Since it is experimental, it might be broken in some versions

More Related Contents:

  1. “You may need an additional loader to handle the result of these loaders.”
  2. TypeError: Cannot read properties of undefined (reading ‘call’) on Next.js
  3. How to prevent Next.js from instantiating a singleton class/object multiple times?
  4. Next.js app folder: is there some “entry point”? A direct replacement for _app.tsx?
  5. Can’t perform a React state update on an unmounted component
  6. Window is not defined in Next.js React app
  7. Calling webpacked code from outside (HTML script tag)
  8. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  9. How to fix error “Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)”
  10. How to load image files with webpack file-loader
  11. In React and Next.js constructor, I am getting “Reference Error: localstorage is not defined”
  12. where is create-react-app webpack config and files?
  13. Warning: Function components cannot be given refs
  14. Importing CSS files in Isomorphic React Components
  15. Environment variables not working (Next.JS 9.4.4)
  16. Next.js context provider wrapping App component with page specific layout component giving undefined data
  17. Should we use useCallback in every function handler in React Functional Components
  18. TypeScript React.FC confusion
  19. What is the best way to have a fallback image in NextJS?
  20. Webpack 5 – Uncaught ReferenceError: process is not defined
  21. Next.js: Error: React.Children.only expected to receive a single React element child
  22. Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module ‘babel-preset-react’
  23. useMemo vs. useEffect + useState
  24. Angular: 7.2.1 ES6 class ReferenceError : Cannot access ‘X’ before initialization
  25. Browser Detection in ReactJS
  26. React JS Server side issue – window not found
  27. import * as React from ‘react’; vs import React from ‘react’;
  28. How to avoid caching in the app directory of Next.js?
  29. Preserve Type when using Object.entries
  30. Using styled-components with props and TypeScript

Leave a Comment