SyntaxError: Unexpected token import- Node.js

Question

I am trying to code split my app with webpack but webpack is not creating the chunks for my dynamic imports. I found one source here: https://davidea.st/articles/webpack-typescript-code-split-wont-work which said I needed to change my module property in my tsconfig file from "commonjs" to "esnext" so the typescript compiler won't reduce my dynamic import statements to Promises, resulting in Webpack not knowing they are dynamic imports and thus not creating dynamic chunks. I followed this and during the compilation I can see the chunks now being created! Whoooo! However, the compiler bugs out, with the error in the title of my question, when trying to resolve the import statements in my express app as those ES imports are not being reduced to something node understands anymore. Does anyone know if this is possible to achieve? I want to use ES imports statements in node but without having the module property in my tsconfig file set to "commonjs". I really don't want to have to refactor all the imports statements to commonJS require statements.

tsconfig.json:

{
    "compilerOptions": {
        "target": "es6",
        "module": "esnext",
        "allowJs": true,
        "sourceMap": false,
        "inlineSourceMap": true,
        "strict": true,
        "strictNullChecks": true,
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "noEmitOnError": true,
        "removeComments": false,
        "forceConsistentCasingInFileNames": true,
        "suppressImplicitAnyIndexErrors": false,
        "jsx": "react",
        "watch": false,
        "moduleResolution": "node"
}}

node version: v8.11.3

I am using ts-node in my npm script to execute my server code:

"start": "webpack && ts-node -- ./src/service/index.ts --env=prod"

My .babelrc looks like the following:

{
    "presets": [
    "react",
    "stage-3",
    [
      "env",
      {
        "modules": false
      }
    ]
  ],
  "plugins": [
    "react-hot-loader/babel",
    "syntax-dynamic-import"
  ]
}

From investigation online I think it seems that I must use the legacy approach of require.ensure as listed here: webpack.js.org/api/module-methods/#require-ensure If I want to use dynamic imports with commonJs module syntax — cah
– cah, Commented Oct 2, 2018 at 20:02

Matt McCutchen · Accepted Answer · 2018-10-03 01:46:02Z

3

By default, ts-node uses the compiler options in the tsconfig.json file in the working directory; you can specify a different tsconfig.json file with the --project option. The tsconfig.json file you use with ts-node must have module set to commonjs (or omitted, in which case ts-node defaults it to commonjs) in order for the on-the-fly compilation to generate modules that Node can understand. You may need to use separate tsconfig.json files for the server code you run with ts-node and the client code you package with Webpack.

answered Oct 3, 2018 at 1:46

Matt McCutchen

31.4k3 gold badges76 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

cah Over a year ago

Oh great I never thought of using another tsconfig file! great idea! I got it working last night using require.ensure to lazy load my components instead of import() but that seems to be a legacy way of doing things as listed here: webpack.js.org/api/module-methods/#require-ensure I'll give the second tsconfig file a whirl, thanks

cah Over a year ago

Worked like a charm Matt! Thank you!

Collectives™ on Stack Overflow

SyntaxError: Unexpected token import- Node.js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related