Typescript: Dynamic import requires module: 'esnext' in Webpack

[olmobrutall]

Hi guys,

I just switched to using the new dynamic import in my webpack app but I was surprised that all the code was bundled together.

The problem was that I was using module : "commonjs", instead of module: "esnext"" in my tsconfig.json.

I finally found my solution here (and I missed it in the the blogpost)

But is not yet document documented in the handbook neither in the json schema for the VS intellisense.

Keep the great work!

[olmobrutall]

Hi again,

Looks like the problem is more fundamental. Using module : "esnext" changes the module resolution system in complicated ways. Like not finding modules in 'node_modules' (moment js in my example).

What I need is something like module: "commonjs + keep import". So webpack can do his work.

Am I missing something? Is there already any example of using import wit a typical webpack + react configuration?

[weswigham]

Add "moduleResolution": "node" to your compiler options. Commonjs modules turn this on by default, but you have to opt in to node style resolution with other module formats.

[olmobrutall]

Works like a charm! Funny that I used module resolution expression in my question but I was unable to find the configuration option.

Thanks!

[hardikmodha]

@olmobrutall I also used "moduleResolution": "node" in my tsconfig compiler options. But it didn't work. Finally, I changed "module": "esnext" and it worked like a charm.

[ak99372]

Same here, it doesn't work when typescript options are set to "module": "commonjs"
In other words this translates to javascript like so:
function () { return require(/* webpackChunkName: "homepage" */ '../_core/pages/HomePage'); }

The only option seems to be changing typescript compile options to "module": "esnext" which then generates:
function () { return import(/* webpackChunkName: "homepage" */ '../_core/pages/HomePage'); }

(Note the require vs import difference)

However there are other reasons why I won't be able to just switch to "esnext" so it would be good if someone can shine some light on this.
Is this webpack ignoring require for dynamic import or is this typescript compilation?

[jcreamer898]

This still doesn't work or make much sense to me. If I try to switch to "module": "esnext" everything asplodes...

What could I be missing?

[StevenLiekens]

@jcreamer898 did you add "moduleResolution": "node"? Otherwise it won't work.

[jcreamer898]

Well, so what I ended up having to do is have 2 tsconfig's, one for WebPack, and another for Node.js. Then depending on what I'm doing, either spinning up the server or running WebPack, I swap configs.

[mewis]

Hi there.
I am also having issues re "module": "esnext"
As jcreamer I get

/Users/ninja/Code/gomedia-base-portal/webpack.config.ts:2
import * as BrowserSyncPlugin from 'browser-sync-webpack-plugin';
^^^^^^

SyntaxError: Unexpected token import

I have added "moduleResolution": "node", with no luck

this is what my tsconfig looks like

{
  "compilerOptions": {
    "baseUrl": ".",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "target" : "es5",
    "module" : "esnext",
    "moduleResolution": "node",
    "lib": [
      "es2016",
      "dom"
    ],
    "paths": {
      "@ts/*": ["src/ts/*"],
      "@components/*": ["src/components/*"],
      "@html/*": ["src/html/*"],
      "@static/*": ["src/static/*"],
      "@js/*": ["src/js/*"],
      "@sass/*": ["src/sass/*"]
    },
  }
}

[rohmanhm]

I think we cannot set module to esnext.

It's give me an error like below

$ ./node_modules/.bin/tsc
error TS6046: Argument for '--module' option must be: 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015'.

[mhegazy]

what version of tsc are you using?

[rohmanhm]

Oops. Sorry my bad, I'm using tsc version 2.3.*