ES Module error: Cannot use import statement outside a module #265

puchm · 2021-05-23T18:33:31Z

Issue description

I am looking at porting some projects to ESM and I don't know what I am doing wrong. This is the full error:

(node:10732) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
C:\Users\Moritz\Documents\Programming\esmtest\main.ts:1
import cryptoRandomString from 'crypto-random-string';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:355:18)
    at wrapSafe (node:internal/modules/cjs/loader:1039:15)
    at Module._compile (node:internal/modules/cjs/loader:1073:27)
    at Module._compile (C:\Users\Moritz\Documents\Programming\esmtest\node_modules\source-map-support\source-map-support.js:547:25)
    at Module.m._compile (C:\Users\Moritz\AppData\Local\Temp\ts-node-dev-hook-06833675296542485.js:69:33)
    at Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
    at require.extensions.<computed> (C:\Users\Moritz\AppData\Local\Temp\ts-node-dev-hook-06833675296542485.js:71:20)
    at Object.nodeDevHook [as .ts] (C:\Users\Moritz\Documents\Programming\esmtest\node_modules\ts-node-dev\lib\hook.js:63:13)
    at Module.load (node:internal/modules/cjs/loader:989:32)
    at Function.Module._load (node:internal/modules/cjs/loader:829:14)
[ERROR] 20:21:04 SyntaxError: Cannot use import statement outside a module

Context

OS version (is it docker or host?), ts-node-dev version Windows 10 Home
Node version 16.2.0

Did you try to run with ts-node?
Yes, this is what I tried:
npx ts-node main.ts returned:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for C:\Users\Moritz\Documents\Programming\esmtest\main.ts
    at new NodeError (node:internal/errors:363:5)
    at Loader.defaultGetFormat [as _getFormat] (node:internal/modules/esm/get_format:71:15)
    at Loader.getFormat (node:internal/modules/esm/loader:105:42)
    at Loader.getModuleJob (node:internal/modules/esm/loader:243:31)
    at Loader.import (node:internal/modules/esm/loader:177:17)
    at Object.loadESM (node:internal/process/esm_loader:68:5)

However node --loader ts-node/esm main.ts worked.

Did you try to run with --files option enabled?
Yes, no changes

Did you try to run with --debug option enabled?
Yes, nothing special

Do you have a repro example (git repo) with simple steps to reproduce your problem?
Yes, here: https://github.com/puchm/ts-node-dev-esm-test

Just run npm start

The text was updated successfully, but these errors were encountered:

quadratz · 2021-07-12T15:24:54Z

I got the same error. In my case, the issue has been resolved by changing the option in tsconfig.json

from:
{ "compilerOptions": { "module": "es2020" } }
to:
{ "compilerOptions": { "module": "commonjs" } }

As mentioned in TypeStrong/ts-node#922 (comment)

So all in all this can be summarized as: Using TypeScript, node.js and the TypeScript compiler option "module": "esnext" together is next to impossible. So if you're building code that should be ran with node.js, in 2020, you should still choose "module": "commonjs".

octet-stream · 2021-07-12T16:00:25Z

When you set the module option to commonjs, TS will compile your ESM code down to CJS, which is not the solution when you want to have native ESM support.
I ran into the same problem with ts-node-dev, while with ts-node it works fine when I'm using the ESM loader as mentioned in original post (like node --loader ts-node/esm src/index.ts).

Node.js version: 16.4.0
ts-node version: 10.0.0
ts-node-dev version: 1.1.6
OS version: macOS 11.4

Cretezy · 2021-07-14T18:45:31Z

This is a major blocking issue for us, and we're considering switching away from ts-node-dev (which worked perfectly in the past) as many dependencies are switching to ESM.

We are using:

In package.json: "type": "module"

In tsconfig.json: "module": "ES2020"

And we are getting: SyntaxError: Cannot use import statement outside a module

ghost · 2021-07-24T19:20:55Z

Same issue here. This needs to be updated.

ivawzh · 2021-08-01T06:22:45Z

Same issue

elliotsaha · 2021-08-06T09:39:59Z

Any update to this? The issue is still persistent in the package.

jianhao · 2021-08-25T10:32:22Z

I also encounter this problem, so when will ESM be supported?

ghost · 2021-08-26T18:32:40Z

Yep, same issue. I'm giving up on react / typescript. It's a nightmare.

johanolandero · 2021-09-21T15:13:40Z

A workaround is to override compiler options for ts-node and keep TS compiling to module type of choice

Can be done within tsconfig.json

// tsconfig.json

{
  "compilerOptions": {
    "module": "es2020",
    // ... rest of config
  },
  "ts-node": {
    "compilerOptions": {
      "module": "commonjs"
    }
  }
}

ts-node-dev ver. 1.1.8 (using ts-node ver. 9.1.1, typescript ver. 4.4.2)

lukeberry99 · 2021-11-09T15:31:59Z

I still get issues when using ESM only modules with the above config from @johanolandero. Is there any progress on ts-node-dev supporting ES2020 and type: module yet? Or is there a suggested project to migrate to?

SrBrahma · 2021-11-19T22:48:36Z

ESM is being a nightmare to me. The solution of @johanolandero doesn't work if you are using import [...] .js to suit ESM in the project as some libs require it.

trickstival · 2021-12-01T10:16:42Z

I have the same problem when trying to run mocha tests with ts-node

damianobarbati · 2022-01-11T20:57:20Z

Did anybody find a solution to this mess?

spiffytech · 2022-02-08T21:04:11Z

If your compile time is quick you can instruct nodemon to restart your app using the ts-node ESM loader:

nodemon --exec 'node --loader ts-node/esm' src/index.ts

Otherwise, you can use tsc --watch and have something watch the compiled output. My preferred way to do this is to combine npm-run-all with watchexec (you can do this with nodemon, you'll just have to do a full build before you start nodemon)

"scripts": {
    "server:build:dev": "tsc -w",
    "server:watch": "watchexec --postpone --restart --debounce 250 --no-vcs-ignore --filter 'dist/**/*' 'node dist/index.js'",
    "server:dev": "npm-run-all --parallel server:build:dev server:watch",
}

ghost · 2022-04-01T12:13:13Z

A workaround is to override compiler options for ts-node and keep TS compiling to module type of choice

Can be done within tsconfig.json
// tsconfig.json

{
  "compilerOptions": {
    "module": "es2020",
    // ... rest of config
  },
  "ts-node": {
    "compilerOptions": {
      "module": "commonjs"
    }
  }
}
ts-node-dev ver. 1.1.8 (using ts-node ver. 9.1.1, typescript ver. 4.4.2)

This doesn't help since that's for ts-node options not for ts-node-dev, the issue still persists even today for me, can't get top-level to work properly sadly (works perfectly with ts-node, the fact is that ts-node-dev doesn't do that), waiting for an update that will allow us the save behaviour in tsconfig.json as ts-node provides already.

Will probably try to figure this out more or simply change to something like nodemon that's already mentioned.

angelhdzdev · 2022-07-28T02:38:25Z

A workaround is to override compiler options for ts-node and keep TS compiling to module type of choice
Can be done within tsconfig.json
// tsconfig.json

{
  "compilerOptions": {
    "module": "es2020",
    // ... rest of config
  },
  "ts-node": {
    "compilerOptions": {
      "module": "commonjs"
    }
  }
}
ts-node-dev ver. 1.1.8 (using ts-node ver. 9.1.1, typescript ver. 4.4.2)
This doesn't help since that's for ts-node options not for ts-node-dev, the issue still persists even today for me, can't get top-level to work properly sadly (works perfectly with ts-node, the fact is that ts-node-dev doesn't do that), waiting for an update that will allow us the save behaviour in tsconfig.json as ts-node provides already.

Will probably try to figure this out more or simply change to something like nodemon that's already mentioned.

I managed to get everything working with Nodemon + Babel + Babel TypeScript plugins/presets. And I think the solution also involves ts-node, can't remember now.

Yeah confirmed it, it uses ts-node: nodemon -I --exec node --experimental-specifier-resolution=node --loader ts-node/esm ./src/main.ts.

I hope this gets solved soon as I want to keep using ts-node-dev but I need ESM and top level await and all the good stuff from EcmaScript Next.

Update

I've been lately using the following approach which is fast and smooth:
nodemon --exec node --loader ts-node/esm src/main.ts.

pravesa · 2022-10-14T14:55:23Z

Solution

To use the native ESM support of the node within our typescript project and to transpile with ts-node, we have to reconfigure the package.json and tsconfig.json accordingly.

In package.json,

{
-  "type": "commonjs"
+  "type": "module"
}

In tsconfig.json,

{
  "compilerOptions": {
-    "module": "CommonJS"
+    "module": "ESNext" // or ES2015, ES2020
  },
  "ts-node": {
+    "esm": true
  }
}

Note:

without "type": "module" in package.json, we get SyntaxError: Cannot use import statement outside a module error
without "esm": true in tsconfig.json but package.json reconfigured, we get TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" error

carlocorradini · 2022-10-14T16:07:04Z

@pravesa Unfortunately throws an error: ERR_UNSUPPORTED_DIR_IMPORT 😥

pravesa · 2022-10-14T20:11:36Z

@carlocorradini This error might be caused while resolving your imported module path. So, could you provide your exact error stack

angelhdzdev · 2022-10-14T20:54:45Z

Solution

To use the native ESM support of the node within our typescript project and to transpile with ts-node, we have to reconfigure the package.json and tsconfig.json accordingly.

In package.json,
{
-  "type": "commonjs"
+  "type": "module"
}
In tsconfig.json,
{
  "compilerOptions": {
-    "module": "CommonJS"
+    "module": "ESNext" // or ES2015, ES2020
  },
  "ts-node": {
+    "esm": true
  }
}
Note:

without "type": "module" in package.json, we get SyntaxError: Cannot use import statement outside a module error

without "esm": true in tsconfig.json but package.json reconfigured, we get TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" error

Sadly this doesn't work for me.

I have everything configured correctly, type module in package.json, target and module to ESNext in tsconfig, moduleResolution to node, esModuleInterop true, allowSyntheticImports true, and "ts-node": { esm: true }

Then in my scripts:
"dev": "ts-node-dev --respawn src/main.ts"

And I get the error that I posted many times in this repository:

Must use import to load ES Module.

With nodemon and ts-node I got it working this way:
nodemon --exec node --loader ts-node/esm src/main.ts

No issues so far.

carlocorradini · 2022-10-14T20:58:13Z

Same error as @angelhdzmultimedia
@pravesa I obtain ERR_UNSUPPORTED_DIR_IMPORT error when simply running ts-node ....
Supporting top-level-await could be super cool and very (very) useful.

angelhdzdev · 2022-10-14T21:03:31Z

nodemon --exec node --loader ts-node/esm src/main.ts

Install nodemon and ts-node while the ts-node-dev team solves this issue. You'll enjoy top level await and other goodies.

Then in your script:

"dev": "nodemon --exec node --loader ts-node/esm src/main.ts"

pravesa · 2022-10-14T21:26:39Z

Same error as @angelhdzmultimedia @pravesa I obtain ERR_UNSUPPORTED_DIR_IMPORT error when simply running ts-node .... Supporting top-level-await could be super cool and very (very) useful.

@carlocorradini I hope that the error message you get in your terminal is like this,
CustomError: ERR_UNSUPPORTED_DIR_IMPORT <file_path_in_your_project_that_is_imported> <file_that_has_import_statement>

So, to resolve this I need your exact error stack

carlocorradini · 2022-10-15T09:33:36Z

@pravesa Running with ts-node-dev I obtain the same error as @angelhdzmultimedia
Running with "pure" ts-node I obtain the following error:

PS: the project is available here

pravesa · 2022-10-15T15:26:38Z

@pravesa Running with ts-node-dev I obtain the same error as @angelhdzmultimedia Running with "pure" ts-node I obtain the following error:

PS: the project is available here

@carlocorradini nodejs resolves module path in ESM type with some additional rules. So, refactor imports and exports in typescript project as follows to solve your issue,

example directory

my-app
├── package.json
│ 
└── src
    ├── logger
    │   ├── logger.ts
    │   └──  index.ts
    ├── somefile.ts
    └── main.ts

NOTE --> `import` and `export` statements should have `full path` and `.js` extensions for files,

example.

// exporting a file inside `/logger/index.ts`
export somefeature from 'logger.js';

 // importing (from) file
import 'somefile.js'; 
import somefeature from 'logger.js';

// importing a subdirectory (full path should be specified)
import { loggerfeature } from './logger/index.js';

If the file doesn't have .js extension in export or import statement you will get ERR_MODULE_NOT_FOUND error, while for subdirectory import without full path (incl. index.js) you will get ERR_UNSUPPORTED_DIR_IMPORT error.

Hope, this will resolves your problem.

warcayac · 2022-10-24T19:54:48Z

nodemon --exec node --loader ts-node/esm src/main.ts

Install nodemon and ts-node while the ts-node-dev team solves this issue. You'll enjoy top level await and other goodies.

Then in your script:

"dev": "nodemon --exec node --loader ts-node/esm src/main.ts"

Hi @angelhdzmultimedia, I like your theme, is it applied to IDE only or desktop in general? what theme are you using (for VSCode and OS)? is it on a Linux distro?

angelhdzdev · 2022-10-25T14:23:38Z

nodemon --exec node --loader ts-node/esm src/main.ts

Install nodemon and ts-node while the ts-node-dev team solves this issue. You'll enjoy top level await and other goodies.
Then in your script:
"dev": "nodemon --exec node --loader ts-node/esm src/main.ts"

Hi @angelhdzmultimedia, I like your theme, is it applied to IDE only or desktop in general? what theme are you using (for VSCode and OS)? is it on a Linux distro?

One Dark Theme and the GlassIt extension to make the window transparent.

hyoretsu · 2022-10-28T03:26:53Z

Same Must use import to load ES Module. error, please fix.

RobinVanCauter mentioned this issue Aug 7, 2021

Compile error after upgrading to 2.0.0 using TypeScript geckosio/geckos.io#114

Closed

codyebberson mentioned this issue Sep 13, 2021

ES Modules medplum/medplum#83

Closed

carlocorradini mentioned this issue Apr 1, 2022

Top-level await #306

Open

L2jLiga mentioned this issue Apr 4, 2022

upgrading to 4.0.0 L2jLiga/fastify-decorators#738

Open

angelhdzdev mentioned this issue May 19, 2022

[ERROR] Cannot use import statement outside module #310

Open

harisraharjo mentioned this issue Feb 2, 2023

add Planetscale RobinBlomberg/kysely-codegen#58

Closed

simon-wacker mentioned this issue Feb 16, 2023

Upgrade dependencies building-envelope-data/metabase#146

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ES Module error: Cannot use import statement outside a module #265

ES Module error: Cannot use import statement outside a module #265

puchm commented May 23, 2021 •

edited

Loading

quadratz commented Jul 12, 2021 •

edited

Loading

octet-stream commented Jul 12, 2021 •

edited

Loading

Cretezy commented Jul 14, 2021

ghost commented Jul 24, 2021

ivawzh commented Aug 1, 2021

elliotsaha commented Aug 6, 2021 •

edited

Loading

jianhao commented Aug 25, 2021

ghost commented Aug 26, 2021

johanolandero commented Sep 21, 2021

lukeberry99 commented Nov 9, 2021

SrBrahma commented Nov 19, 2021 •

edited

Loading

trickstival commented Dec 1, 2021

damianobarbati commented Jan 11, 2022

spiffytech commented Feb 8, 2022 •

edited

Loading

ghost commented Apr 1, 2022 •

edited by ghost

Loading

angelhdzdev commented Jul 28, 2022 •

edited

Loading

pravesa commented Oct 14, 2022

carlocorradini commented Oct 14, 2022

pravesa commented Oct 14, 2022 •

edited

Loading

angelhdzdev commented Oct 14, 2022

Solution

carlocorradini commented Oct 14, 2022

angelhdzdev commented Oct 14, 2022

pravesa commented Oct 14, 2022

carlocorradini commented Oct 15, 2022

pravesa commented Oct 15, 2022

warcayac commented Oct 24, 2022

angelhdzdev commented Oct 25, 2022

hyoretsu commented Oct 28, 2022

ES Module error: Cannot use import statement outside a module #265

ES Module error: Cannot use import statement outside a module #265

Comments

puchm commented May 23, 2021 • edited Loading

Issue description

Context

quadratz commented Jul 12, 2021 • edited Loading

octet-stream commented Jul 12, 2021 • edited Loading

Cretezy commented Jul 14, 2021

ghost commented Jul 24, 2021

ivawzh commented Aug 1, 2021

elliotsaha commented Aug 6, 2021 • edited Loading

jianhao commented Aug 25, 2021

ghost commented Aug 26, 2021

johanolandero commented Sep 21, 2021

lukeberry99 commented Nov 9, 2021

SrBrahma commented Nov 19, 2021 • edited Loading

trickstival commented Dec 1, 2021

damianobarbati commented Jan 11, 2022

spiffytech commented Feb 8, 2022 • edited Loading

ghost commented Apr 1, 2022 • edited by ghost Loading

angelhdzdev commented Jul 28, 2022 • edited Loading

Update

pravesa commented Oct 14, 2022

Solution

carlocorradini commented Oct 14, 2022

pravesa commented Oct 14, 2022 • edited Loading

angelhdzdev commented Oct 14, 2022

Solution

Sadly this doesn't work for me.

carlocorradini commented Oct 14, 2022

angelhdzdev commented Oct 14, 2022

pravesa commented Oct 14, 2022

carlocorradini commented Oct 15, 2022

pravesa commented Oct 15, 2022

example directory

NOTE --> import and export statements should have full path and .js extensions for files,

example.

warcayac commented Oct 24, 2022

angelhdzdev commented Oct 25, 2022

hyoretsu commented Oct 28, 2022

puchm commented May 23, 2021 •

edited

Loading

quadratz commented Jul 12, 2021 •

edited

Loading

octet-stream commented Jul 12, 2021 •

edited

Loading

elliotsaha commented Aug 6, 2021 •

edited

Loading

SrBrahma commented Nov 19, 2021 •

edited

Loading

spiffytech commented Feb 8, 2022 •

edited

Loading

ghost commented Apr 1, 2022 •

edited by ghost

Loading

angelhdzdev commented Jul 28, 2022 •

edited

Loading

pravesa commented Oct 14, 2022 •

edited

Loading

NOTE --> `import` and `export` statements should have `full path` and `.js` extensions for files,