Error when using dynamic import -- support esnext

[RiftLurker]

What happens and why it is wrong

When using dynamic imports the following error is thrown:

[!] (rpt2 plugin) Error: /home/leo/development/other/rollup-plugin-typescript2-debug/a.ts(1,1): semantic error TS1323 Dynamic import cannot be used when targeting ECMAScript 2015 modules.
a.ts
Error: /home/leo/development/other/rollup-plugin-typescript2-debug/a.ts(1,1): semantic error TS1323 Dynamic import cannot be used when targeting ECMAScript 2015 modules.
    at error (/home/leo/development/other/rollup-plugin-typescript2-debug/node_modules/rollup/dist/rollup.js:170:15)
    at /home/leo/development/other/rollup-plugin-typescript2-debug/node_modules/rollup/dist/rollup.js:17346:17
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
    at Function.Module.runMain (module.js:667:11)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:607:3

This is caused by this module forcefully setting the module compiler option to es2015.

Environment

a.ts

import('./b').then(({ message }) => console.log(message));

b.ts

export const message = 'it works!';

Versions

• typescript: 2.6.2
• rollup: 0.53.4
• rollup-plugin-typescript2: 0.9.0

rollup.config.js

"use strict";

import typescript from "rollup-plugin-typescript2";

export default {
  input: "./a.ts",
  output: {
    format: "cjs",
  },

  plugins: [
    typescript({
      tsconfig: './tsconfig.json',
      verbosity: 3,
    })
  ]
}

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2015"
  }
}

plugin output with verbosity 3

rpt2: typescript version: 2.8.0-dev.20180131
rpt2: rollup-plugin-typescript2 version: 0.9.0
rpt2: plugin options:
{
    "tsconfig": "./tsconfig.json",
    "verbosity": 3,
    "check": true,
    "clean": false,
    "cacheRoot": "/home/leo/development/other/rollup-plugin-typescript2-debug/.rpt2_cache",
    "include": [
        "*.ts+(|x)",
        "**/*.ts+(|x)"
    ],
    "exclude": [
        "*.d.ts",
        "**/*.d.ts"
    ],
    "abortOnError": true,
    "rollupCommonJSResolveHack": false,
    "useTsconfigDeclarationDir": false,
    "typescript": "version 2.8.0-dev.20180131",
    "tsconfigOverride": {}
}
rpt2: rollup config:
{
    "input": "./a.ts",
    "plugins": [
        {
            "name": "rpt2"
        }
    ],
    "entry": "./a.ts",
    "external": [
        "",
        ""
    ]
}
rpt2: built-in options overrides: {
    "module": 5,
    "noEmitHelpers": true,
    "importHelpers": true,
    "noResolve": false,
    "noEmit": false,
    "outDir": "/home/leo/development/other/rollup-plugin-typescript2-debug",
    "moduleResolution": 2
}
rpt2: parsed tsconfig: {
    "options": {
        "module": 5,
        "target": 2,
        "outDir": "/home/leo/development/other/rollup-plugin-typescript2-debug",
        "baseUrl": "/home/leo/development/other/rollup-plugin-typescript2-debug/src/",
        "sourceMap": true,
        "strict": true,
        "experimentalDecorators": true,
        "noImplicitReturns": true,
        "allowSyntheticDefaultImports": true,
        "allowUnreachableCode": false,
        "noEmitHelpers": true,
        "importHelpers": true,
        "noResolve": false,
        "noEmit": false,
        "moduleResolution": 2,
        "configFilePath": "/home/leo/development/other/rollup-plugin-typescript2-debug/./tsconfig.json"
    },
    "fileNames": [
        "/home/leo/development/other/rollup-plugin-typescript2-debug/a.ts",
        "/home/leo/development/other/rollup-plugin-typescript2-debug/b.ts",
        "/home/leo/development/other/rollup-plugin-typescript2-debug/src/a.ts",
        "/home/leo/development/other/rollup-plugin-typescript2-debug/src/main.ts",
        "/home/leo/development/other/rollup-plugin-typescript2-debug/src/types.d.ts",
        "/home/leo/development/other/rollup-plugin-typescript2-debug/src/utils/ErrorMapper.ts"
    ],
    "typeAcquisition": {
        "enable": false,
        "include": [],
        "exclude": []
    },
    "raw": {
        "compilerOptions": {
            "module": "commonjs",
            "target": "es2015",
            "outDir": "dist",
            "baseUrl": "src/",
            "sourceMap": true,
            "strict": true,
            "experimentalDecorators": true,
            "noImplicitReturns": true,
            "allowSyntheticDefaultImports": true,
            "allowUnreachableCode": false
        },
        "exclude": [
            "node_modules"
        ]
    },
    "errors": [],
    "wildcardDirectories": {
        "/home/leo/development/other/rollup-plugin-typescript2-debug": 1
    },
    "compileOnSave": false,
    "configFileSpecs": {
        "includeSpecs": [
            "**/*"
        ],
        "excludeSpecs": [
            "node_modules"
        ],
        "validatedIncludeSpecs": [
            "**/*"
        ],
        "validatedExcludeSpecs": [
            "node_modules"
        ],
        "wildcardDirectories": {
            "/home/leo/development/other/rollup-plugin-typescript2-debug": 1
        }
    }
}
rpt2: included:
'[
    "*.ts+(|x)",
    "**/*.ts+(|x)"
]'
rpt2: excluded:
'[
    "*.d.ts",
    "**/*.d.ts"
]'
rpt2: Ambient types:
rpt2:     /home/leo/development/other/rollup-plugin-typescript2-debug/src/types.d.ts
rpt2:     /home/leo/development/other/rollup-plugin-typescript2-debug/node_modules/@types/lodash/index.d.ts
rpt2:     /home/leo/development/other/rollup-plugin-typescript2-debug/node_modules/@types/node/index.d.ts
rpt2:     /home/leo/development/other/rollup-plugin-typescript2-debug/node_modules/@types/screeps/index.d.ts
rpt2: ambient types changed, redoing all semantic diagnostics
rpt2: transpiling '/home/leo/development/other/rollup-plugin-typescript2-debug/a.ts'
rpt2:     cache: '/home/leo/development/other/rollup-plugin-typescript2-debug/.rpt2_cache/cd81cf42f3dcf638d9c3e61868cbf69ad7637cd0/code/cache/f11ac0bffbde51209d9a516866cafbe3aca2435c'
rpt2:     cache miss
rpt2:     cache: '/home/leo/development/other/rollup-plugin-typescript2-debug/.rpt2_cache/cd81cf42f3dcf638d9c3e61868cbf69ad7637cd0/syntacticDiagnostics/cache/f11ac0bffbde51209d9a516866cafbe3aca2435c'
rpt2:     cache miss
rpt2:     cache: '/home/leo/development/other/rollup-plugin-typescript2-debug/.rpt2_cache/cd81cf42f3dcf638d9c3e61868cbf69ad7637cd0/semanticDiagnostics/cache/f11ac0bffbde51209d9a516866cafbe3aca2435c'
rpt2:     cache miss
[!] (rpt2 plugin) Error: /home/leo/development/other/rollup-plugin-typescript2-debug/a.ts(1,1): semantic error TS1323 Dynamic import cannot be used when targeting ECMAScript 2015 modules.
a.ts
Error: /home/leo/development/other/rollup-plugin-typescript2-debug/a.ts(1,1): semantic error TS1323 Dynamic import cannot be used when targeting ECMAScript 2015 modules.
    at error (/home/leo/development/other/rollup-plugin-typescript2-debug/node_modules/rollup/dist/rollup.js:170:15)
    at /home/leo/development/other/rollup-plugin-typescript2-debug/node_modules/rollup/dist/rollup.js:17346:17
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
    at Function.Module.runMain (module.js:667:11)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:607:3

[ezolenko]

Using module: commonjs generates bunch of requires and rollup doesn't roll anything up. Using esnext seems to work though (and is another option that supposedly supports dynamic imports according to microsoft/TypeScript#16675).

Not sure what other effects would that have if I just changed it across the board for existing users.

[shunia]

@ezolenko not actually working with this plugin

[shunia]

Output here:

rpt2: rollup-plugin-typescript2 version: 0.11.1
rpt2: plugin options:
{
    "verbosity": 3,
    "check": true,
    "clean": false,
    "cacheRoot": "/Client/.rpt2_cache",
    "include": [
        "*.ts+(|x)",
        "**/*.ts+(|x)"
    ],
    "exclude": [
        "*.d.ts",
        "**/*.d.ts"
    ],
    "abortOnError": true,
    "rollupCommonJSResolveHack": false,
    "typescript": "version 2.7.1",
    "useTsconfigDeclarationDir": false,
    "tsconfigOverride": {},
    "tsconfigDefaults": {}
}
rpt2: rollup config:
{
    "input": "src/Entry.tsx",
    "plugins": [
        {
            "name": "rpt2"
        },
        {
            "name": "postcss"
        }
    ],
    "entry": "src/Entry.tsx",
    "external": [
        "",
        ""
    ]
}
rpt2: built-in options overrides: {
    "module": 5,
    "noEmitHelpers": false,
    "importHelpers": true,
    "noResolve": false,
    "noEmit": false,
    "outDir": "/Client",
    "moduleResolution": 2,
    "declarationDir": null
}
rpt2: parsed tsconfig: {
    "options": {
        "experimentalDecorators": true,
        "module": 5,
        "target": 1,
        "sourceMap": true,
        "allowJs": false,
        "jsx": 2,
        "baseUrl": "/Client/src",
        "types": [
            "node"
        ],
        "lib": [
            "lib.dom.d.ts",
            "lib.es2015.d.ts",
            "lib.es2015.d.ts"
        ],
        "noEmitHelpers": false,
        "importHelpers": true,
        "noResolve": false,
        "noEmit": false,
        "outDir": "/Client",
        "moduleResolution": 2,
        "declarationDir": null,
        "configFilePath": "/Client/tsconfig.json"
    },
    "fileNames": [
    ],
    "typeAcquisition": {
        "enable": false,
        "include": [],
        "exclude": []
    },
    "raw": {
        "compilerOptions": {
            "experimentalDecorators": true,
            "module": "esnext",
            "target": "es5",
            "sourceMap": true,
            "allowJs": false,
            "jsx": "react",
            "baseUrl": "src",
            "types": [
                "node"
            ],
            "lib": [
                "dom",
                "es2015",
                "es6"
            ]
        }
    },

[ezolenko]

Yeah, the plugin overrides the module setting, so your esnext is ignored. @rpetrich made a fork overriding to esnext instead. @shunia could you check that fork out and see if it works as expected?

If it works, I'll either switch to esnext (don't know what effect it will have on all other users) or expose module flag so it will actually go through.

[rpetrich]

I didn't notice any downsides to using esnext, other than older TypeScript versions becoming unsupported.

[shunia]

Why default over custom?

If I have a tsconfig.json out there, it means that I want everything goes with my custom config, not the defaults.

Whatever the override value is, the plugin should not override my config except it is allowed to.

If I misunderstand anything here please correct me.

[ezolenko]

@shunia before esnext became available, es2015 was the only option you could use for rollup to understand the output. In such cases where there can be only one option that could possibly work, I override the value (other examples are moduleResolution, noEmit, etc).

Now that there is more than one option, I'll have to relax the override (will probably take the value from tsconfig and warn if values is incompatible with rollup).

[shunia]

One more question:
Shouldn't the warning be poped out by rollup itself? If this is an incompatible issue with rollup to work with typescript.

But of course, if you have to implement this inside rollup-plugin-typescript2, pls just do this.

[ezolenko]

In worst case (module: "commonjs") rollup will simply not see any imports and will only ever transpile and bundle the entry file keeping requires as they are. (Well, I didn't check other cases, but that one as bad as it gets: no errors and broken output).

0.12.0 is now on npm, that one will take tsconfig value, accepting es2015 and esnext, and bail out on anything else.