Error when trying to use dynamic import with module: "es2015"

[Nitive]

TypeScript Version: 2.4.0

Code

import('./utils')
  .then(({ sum }) => {
    console.log(sum(1, 2))
  })
  .catch(console.error)

tsconfig.json (short version)

{
  "compilerOptions": {
    "moduleResolution": "node",
    "module": "es2015"
  }
}

Expected behavior:
No errors

Actual behavior:
Dynamic import cannot be used when targeting ECMAScript 2015 modules. with non-obvious reasons why.

Example repository

---

I get error Dynamic import cannot be used when targeting ECMAScript 2015 modules.
when I try to use dynamic import inside typescript project with "module": "es2015"
in configuration. The error message makes it clear that I can't use import() with
es modules but it doesn't make sense because import() is part of es modules.

However, it compiles correctly but throw annoing error.

I created a repository to reproduce an error.
npm run build-ts: compile ts files into build/ folder.
npm run build-webpack: compile js into dist/. (Then open index.html to see that everything works fine)

[DanielRosenwasser]

You'll want to use "module": "esnext". Sorry about the confusion there.

[DanielRosenwasser]

We should just be more helpful here.

[Nitive]

Thanks, it works!

[Sebazzz]

@DanielRosenwasser Does that mean if you want to target es5 you need to transpile the outputted JS with something like babel? Is there any other way to fool Typescript into emitting import so Webpack can work with that?

[mhegazy]

es2015 is ES6 and not es5. if you want to target es5, just set target to es5, and module to whatever module you are using.

ES6 modules as they stand have no way to support import()

[Sebazzz]

Ah, right, the module compiler flag, not the target compiler flag. My bad.

[codeaid]

I always had module compiler option set to commonjs and dynamic imports worked just fine.

Updated from 2.5.3 to 2.6.1 earlier today, ran NPM build in my React application and instead of getting errors like @Nitive did I got one bundle file instead of the usual multiple chunks. Changed module to be esnext as @DanielRosenwasser suggested and that fixed the issue!

Just leaving it here for people who might have a similar issue.

[hnviradiya9]

Hey, Guys.
I still have this issue, even if I set it to "module": "esnext"

Anything more I need to do?

[mhegazy]

@hnviradiya9 please file a new issue with repro steps to reproduce the issue you are running into.

[tomavic]

Hi @mhegazy
I have updated typescript to 2.7.2. I have an Injectable service file which contains this line

  createMetaLoader(id, folderName): Promise<any> {
    let clientfolder = ACTIVE_CLIENT;
    let promise = import("../../../assets/meta/"+ clientfolder + "/" + folderName + "/" + id + ".ts")
    return promise;
  }

and it throws an Error

ERROR in src/app/shared/meta/meta-loader.service.ts(26,19): error TS1323: Dynamic import cannot be used when targeting ECMAScript 2015 modules.

[mhegazy]

you have --module ES2015, ES2015 does not support this form of importing. so either use --module esnext or --module commonjs.

[paulkoerbitz]

I would like to take a look at improving the error message since this keeps coming up if this is OK.

[tomavic]

@mhegazy

In angular project created by Angular CLI, I have two files tsconfig.json located in root directory, and other one in src folder named tsconfig.app.json

Should I change "module": "esnext" in both files ??

[Hotell]

@tomavic depends what you are after. If u wanna make it work for both app and unit tests then go for root. Cheers

[tomavic]

I changed it in both and now it works like charm <3
Thanks @Hotell @mhegazy foll ya basha :D

[mhegazy]

thanks @paulkoerbitz!

[sherlock1982]

I have similar issue which I don't really understand. When I set in tsconfig:

"target": "es5",
"module": "esnext",

It works. Though when I set

"target": "es6",
"module": "esnext",

I have this error.
Can I use esnext together with target=es6 ? Typescript 2.7.2

[bennypowers]

"module": "esnext" is invalid in a jsconfig.json file.

Value is not accepted. Valid values: "commonjs", "amd", "umd", "system", "es6", "es2015".

[tomavic]

@bennypowers Please check your typescript version, and write it here

[facundocoto]

I try to

"target": "es5",
"module": "esnext",

"target": "es6",
"module": "esnext",

and I have the same error.

My typescript version is 2.8.3.

Any suggestions?

[tomavic]

@facundocoto Which file are you trying to edit. tsconfig.json or tsconfig.app.json ?

[facundocoto]

@tomavic I had to edit both, then works for me

[enjikaka]

Having issues with import.meta.url not working. In my source code hovering item.meta.url in VSCode tells me:

The 'import.meta' meta-property is only allowed using 'ESNext' for the 'target' and 'module' compiler options.ts(1343)

My jsconfig.json is:

{
  "compilerOptions": {
    "target": "esnext",
    "checkJs": true
  }
}

When adding "module": "esnext" to jsconfig.json it still errors on import.meta.url, and a warning in jsconfig.json on the module line says:

Value is not accepted. Valid values: "commonjs", "amd", "umd", "system", "es6", "es2015".(1)

When down-level compiling, specify module code generation: 'CommonJS', 'Amd', 'System', 'UMD', 'es6', or 'es2015'.

Using Typescript 3.2.2
VS Code Version 1.30.1 (1.30.1)

[DanielRosenwasser]

@enjikaka see SchemaStore/schemastore#602

[ferencbalogh]

ES6" and "ES2015" values may be used when targeting "ES5" or lower.

[syed-mustaqhim]

@hnviradiya9 After making the change "module": "esnext" in tsconfig.json, Reload your code editor (in my case VSCode) and the error is gone

[ShemiNechmad]

Hi,
is it safe to change es2015 to esnext in tsconfig.ts file, in an Angular 8 project?
The build looks fine, however-
could it create any problems which I don't see at the moment when running it?
Thank you