Ts-loader: Can't use nullish coalescing operator with TypeScript 3.8.2

[screendriver]

Expected Behaviour

With TypeScript 3.8.2 I can't use the nullish coalescing operator ?? anymore.

Actual Behaviour

I'm getting the error message

Module parse failed: Unexpected token (36:49)
File was processed with these loaders:
 * ./node_modules/ts-loader/index.js
You may need an additional loader to handle the result of these loaders.

Steps to Reproduce the Problem

Just use const foo = bar ?? '' in your codebase. With TypeScript 3.7.5 everything works fine

[jrmyio]

Same problem here when using the nullish coalescing operator.

fork-ts-checker-webpack-plugin and vscode @ 3.8 things all are ok.

For me TypeScript 3.7.5 also doesn't work. @screendriver what version of ts-loader are you using with TypeScript 3.7.5 that does work?

[screendriver]

I guess I know now why: TypeScript 3.8 changed the behaviour of the target version. So previously if you set it to es2020 it gets transpiled down to older ECMAScript versions. But now it preserves the original syntax, which is not supported by any Node.js version at the moment.

A quote from the official changelog:

TypeScript 3.8 supports es2020 as an option for module and target.
This will preserve newer ECMAScript 2020 features like optional chaining,
nullish coalescing, export * as ns, and dynamic import(...) syntax. It
also means bigint literals now have a stable target below esnext

@ConneXNL I'm using the latest version of ts-loader: 6.2.1

[johnnyreilly]

So is a fix required to your tsconfig.json? Or have you identified a bug in TypeScript itself? Nothing in ts-loader has changed.

[screendriver]

No. It's not a bug. It's a breaking change in the compiler behavior. I changed the target to es2019 and it's working now.

[dperetti]

I don't totally get it. What if I really want es2020, as I'm building solely for the latest Chromium which supports it natively?

[screendriver]

Then you need a Node.js version who is able to bundle code with nullish coalescing. At the moment this is not supported by Node.js

[lukechu10]

Why is this issue closed? I want optional chaining and nullish coalescing to appear in the outputted code because other wise, it messes up my code coverage. I am building an electron app and so it supports these latest features.

[FFdhorkin]

Why is this issue closed? I want optional chaining and nullish coalescing to appear in the outputted code because other wise, it messes up my code coverage. I am building an electron app and so it supports these latest features.

You can get it with babel if you want it now: https://www.npmjs.com/package/@babel/plugin-proposal-nullish-coalescing-operator

[mizchi]

I encountered same problem with [email protected]

target:es2019 works but target:es2020 is broken. Maybe target:es2020 is something wrong.

[mizchi]

Oh, I got it. typescript 3.8 does non transform nullish syntax but webpack's acorn can not parse.
So ts-loader(and webpack) requires es2019 implicitly.

[Shuunen]

Same here with "typescript": "^4.1.3" still needed to downgrade my "target": "ESNext" to "target": "ES2019" in order to use nullish coalescing along with "poi": "^12.10.3" & "@poi/plugin-typescript": "^12.3.1", poi use webpack under the hood

[MadhuvanthG]

To add info to this thread, you can use "ES2020" as your target if you are on Node 14 or higher. Node14 does support nullish coalescing and it's in Active LTS at the moment, so safe to use in Production as well.

[lucasmarinzeck]

I had to downgrade my target to ES2019 as well because ES2020 was not working for some reason

[mathieutu]

@MadhuvanthG Actually I'm currently in v15.10.0, and I still have the problem.

[MadhuvanthG]

Oops, not sure then. We've been using the operator with Node 14 and it does work fine.

I just use tsc to do the compile though because it's server-side code. ts-loader also uses tsc under the hood, I believe.