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

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)

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 16
Comments: 27 (8 by maintainers)

Commits related to this issue

Fix error about dynamic import Explanation: https://github.com/Microsoft/TypeScript/issues/16675 — committed to Nitive/typescript-dynamic-import-example by Nitive 7 years ago
Merge pull request #23957 from paulkoerbitz/16675-better-error-message-for-dynamic-import Fix #16675: Better error message for dynamic import with ES2015 modules — committed to microsoft/TypeScript by mhegazy 6 years ago

Most upvoted comments

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

+79

DanielRosenwasser on Jun 21, 2017

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

Anything more I need to do?

+32

hnviradiya9 on Mar 25, 2018

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

+13

sherlock1982 on May 14, 2018

We should just be more helpful here.

DanielRosenwasser on Jun 21, 2017

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.

codeaid on Nov 2, 2017

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

facundocoto on Jun 12, 2018

“module”: “esnext” is invalid in a jsconfig.json file.

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

bennypowers on May 27, 2018

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

Hotell on May 8, 2018

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

paulkoerbitz on May 8, 2018

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

syed-mustaqhim on May 8, 2022