Combining normal imports with top-level await: A guide

Question

Combining normal imports with top-level await: A guide

Is it possible to simultaneously use imports (import x from y) and top-level awaits with ts-node? I encountered an issue where changing my tsconfig.compilerOptions.module to es2017 or higher, as required by top-level awaits, resulted in the following error:

SyntaxError: Cannot use import statement outside a module

The solution suggested by numerous GitHub issues and Stack Overflow questions is to set tsconfig.compilerOptions.module to commonjs. However, this then leads to another issue:

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

How can both conditions be met simultaneously? There must be a way...

Here's my tsconfig.json:

{
  "compilerOptions": {
    "declaration": true,
    "module": "esnext",
    "target": "es2017",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "outDir": "dist",
    "skipLibCheck": true,
    "resolveJsonModule": true
  },
  "include": ["src/**/*.ts"]
}

And my package.json:

{
  "name": "x",
  "version": "0.0.1",
  "main": "main.js",
  "type": "module",
  ...
}

I am using Node LTS (v16.14.2) and TypeScript 4.6.3.

typescript tsconfig ts-node ts-node-dev

Answer 1

Answer №1

It seems that the main issue you encountered was related to the configuration in your tsconfig.json. Instead of using

"moduleResolution: "node"

, it is recommended to switch to
"module": "nodenext"
and
"moduleResolution: "nodenext"
.

This solution focuses on Node.js and TypeScript setup, rather than involving ts-node. You may find it more beneficial to opt for tsx as an alternative without any additional configuration requirements. Refer to this link for further details.

The sample project structure is:

.
├── src/
│   ├── y.ts
│   └── main.ts
├── package.json
└── tsconfig.json

package.json

"type": "module"

tsconfig.json

{
  "compilerOptions": {
     "target": "ESNext",
     "module": "NodeNext",
     "moduleResolution": "Nodenext",
     "outDir": "dist"
  },
  "include": ["src"]
}

src/y.ts

const doSomethingAsync = () => Promise.resolve('something async')

export { doSomethingAsync }
export default 'y'

src/main.ts

import { doSomethingAsync } from './y.js'
import x from './y.js'

console.log(await doSomethingAsync())
console.log(x)

To compile the code, run ./node_modules/.bin/tsc to generate the build files in dist/.

Execute the compiled code by running node dist/main.js:

something async
y

The versions used for Node.js and TypeScript were:

Node.js 22.1.0
TypeScript 5.4.5

If you still require the use of ts-node, please provide more context. For direct execution of .ts files, consider using tsx instead of ts-node.

For the equivalent output with tsx, utilize the command:

./node_modules/.bin/tsx src/main.ts

Answer 2

It seems that the main issue you encountered was related to the configuration in your tsconfig.json. Instead of using

"moduleResolution: "node"

, it is recommended to switch to
"module": "nodenext"
and
"moduleResolution: "nodenext"
.

This solution focuses on Node.js and TypeScript setup, rather than involving ts-node. You may find it more beneficial to opt for tsx as an alternative without any additional configuration requirements. Refer to this link for further details.

The sample project structure is:

.
├── src/
│   ├── y.ts
│   └── main.ts
├── package.json
└── tsconfig.json

package.json

"type": "module"

tsconfig.json

{
  "compilerOptions": {
     "target": "ESNext",
     "module": "NodeNext",
     "moduleResolution": "Nodenext",
     "outDir": "dist"
  },
  "include": ["src"]
}

src/y.ts

const doSomethingAsync = () => Promise.resolve('something async')

export { doSomethingAsync }
export default 'y'

src/main.ts

import { doSomethingAsync } from './y.js'
import x from './y.js'

console.log(await doSomethingAsync())
console.log(x)

To compile the code, run ./node_modules/.bin/tsc to generate the build files in dist/.

Execute the compiled code by running node dist/main.js:

something async
y

The versions used for Node.js and TypeScript were:

Node.js 22.1.0
TypeScript 5.4.5

If you still require the use of ts-node, please provide more context. For direct execution of .ts files, consider using tsx instead of ts-node.

For the equivalent output with tsx, utilize the command:

./node_modules/.bin/tsx src/main.ts

Combining normal imports with top-level await: A guide

Answer №1

Similar questions

Issue TS1112: It is not possible to declare a class member as optional

Sending data to the makeStyle function in TypeScript

Instance of exported class declared in Typescript

Sharing a FormGroup between different components

What causes @typescript-eslint to retain old types/files in its cache and prevent successful compilation?

Display Bootstrap Modal using Typescript in Angular

Navigating through multiple pages using an Observable in Angular

What is the best way to compare an array with comma-separated values in JavaScript?

Oops! Property 'month' cannot be set on undefined value due to a TypeError

Relaying numerous references in TypeScript

Establish a connection to Cosmos DB from local code by utilizing the DefaultAzureCredential method

Is there a way to sort the output of an observable in various different methods?

The type 'HTMLDivElement | null' cannot be assigned to the type 'HTMLDivElement' in this context

Determining the total number of items in an array in Angular efficiently without causing any lag

What could be causing my controller method in TypeScript to throw an error message unexpectedly?

Utilizing the useRef hook in React to retrieve elements for seamless page transitions with react-scroll

Zero-length in Nightmare.js screenshot buffer: an eerie sight

Issue encountered when utilizing TypeORM within NestJS: Unable to import Entity Repository

What is the syntax for using typeof with anonymous types in TypeScript?

What is the best way to utilize v-model with an array of strings in a Vuex store when using v-for