['babel-loader', 'ts-loader'] i get Syntax Error: SyntaxError with ?.

[1021683053]

Expected Behaviour

I use ['babel-loader', 'ts-loader'] in ts-loader result will to es6 but typescript compile something is missing.

Actual Behaviour

[JonWallsten]

@1021683053: Can you create a small reproducible repo?

[chaosmirage]

I am getting same issue.

webpack.config.js

...
module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(ts|tsx)$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
   }
}
...

and according to this answer https://github.com/webpack/webpack/issues/10227#issuecomment-787945709, it is webpack 4 error.

But I don't understand: if I added test: js|jsx|ts|tsx to babel-loader I will not get this error.

webpack.config.js

...
module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(ts|tsx)$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
   }
}
...

Why does it work?

[nyngwang]

@chaosmirage Did you resolve it? Apparently, it should mean that some typescript transpile functions are only available through babel-loader. So it is indeed a bug of ts-loader.

[johnnyreilly]

I've happily used ts-loader with ?. successfully. I wonder if this might be a tsconfig.json option issue. I seem to recall I had to set various properties first; I forget which I'm afraid

[chaosmirage]

@nyngwang Thank you for the hypothetical explanation!

Actually, I don't remember how fixed it, maybe changing tsconfig from

"target": "ES2020",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
"module": "ES2020",                       /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
"lib": ["ES2020", "dom"],                 /* Specify library files to be included in the compilation. */

to

"target": "ES2019",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
"module": "ES2015",                       /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
"lib": ["ES2019", "dom"],                 /* Specify library files to be included in the compilation. */

was helped