Top-level ‘await’ expressions are only allowed when the ‘module’ option is set to ‘es2022’, ‘esnext’ – How to fix it?

Knowing how to solve the error “Top-level ‘await’ expressions are only allowed when the ‘module’ option is set to ‘es2022’, ‘esnext'” will be very helpful in helping you better understand the ‘async/await’ syntax. So how to solve it? Let’s go into detail now.

Cause of the error “Top-level ‘await’ expressions are only allowed when the ‘module’ option is set to ‘es2022’, ‘esnext'”

Typescripts provides the ‘async/await’ syntax to help you work with a promise more comfortably. Imagine you are working with the promise, but it looks like a regular function. It will be so cool. The error happens here because you are using ‘await’ syntax without ‘async’. And you can’t use it in the regular function. Below is how the error happens.

Example:

await console.log("Hello From Learn Share IT");
export {};

Error:

error TS1378: Top-level 'await' expressions are only allowed when the 'module' option is set to 'es2022', 'esnext', 'system', 'node16', or 'nodenext', and the 'target' option is set to 'es2017' or higher.

In this example, I got the error because I forgot to use the ‘async’ function and tried to use ‘await’ syntax in a non-async function.

Below are some solutions for this error.

Solutions for this error

Use ‘async’ function

You can put ‘await’ inside the ‘async‘ function to solve the above error. An ‘async’ function declared by the ‘async’ keyword, with ‘await’ keyword can execute inside it. The ‘async’ and ‘await’ keywords will help you to execute asynchronous behavior easier just like a normal function.

Example:

const animalList: string[] = [
    "Turtle, Dog, Fish, Cat, Monkey, African Elephant, Allis Shad"
];

async function showAnimal() {
    const result = await Promise.resolve("This line first");
    console.log(result);
    await animalList.forEach((ele) => {
        console.log(ele);
    });
    console.log("done");
}

showAnimal();

Output:

"This line first" 
"Turtle, Dog, Fish, Cat, Monkey, African Elephant, Allis Shad" 
"done"

Set tsconfig.json file

In tsconfig.json file, Typescript also recommends setting the 'module' option to 'es2022'. Because top-level ‘awaits’ provided from module version ‘es2022’.

Example:

{ 
	// Some code line…
    {
        "complierOptions": {
            "target": "es2017",
            "module": "es2022",
        }
        // Some code line…
    }
}

Here I can use ‘await’ expressions at top-level. If you get the error to load an ES module, set "type":" module". And you can set "type" optional to "module" in package.json file.

{
    "type": "module"
}

Summary

In this article, I’ve shown you how to solve the error “Top-level ‘await’ expressions are only allowed when the ‘module’ option is set to ‘es2022’, ‘esnext'”. You can combine the ‘await’ function with ‘async’ or put it in the package.json file to fix it. Let’s try two methods.

Maybe you are interested:

• Tsc is not recognized as an internal or external command – How to solve it?
• Solution For The Error: Could not find declaration file for module ‘lodash’ #
• Cannot use import statement outside a module

Brent Johnson

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.

---

Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm