Unexpected token error at code with optional chaining when using Typescript

[inoyakaigor]

UPD for everyone who will find this issue. For fix this error acornjs/acorn#891 and acornjs/acorn#890 must be merged.
UPD2 we all awaiting while estree/estree/pull/204 will be merged

UPD3 fix for optional chaining landed into acorn 7.3.0 but webpack@4 uses acorn 6.x. so fix of this issue will be in webpack@5: #10227 (comment)

Temporary fixes

For Babel

Add @babel/plugin-proposal-optional-chaining and @babel/plugin-proposal-nullish-coalescing-operator plugins in your config

For Typescript

Do not upgrade to version 3.8 or set compiler option target to es2019

Yarn/NPM level

See the #10227 (comment)

---

Do you want to request a feature or report a bug?
I don't know is it a bug or feature

What is the current behavior?

Get error "Unecpected token"

What is the expected behavior?

Build bundle successfull

Description
When I set in tsconfig.json target: "ESNext" TS keeps my code with optional chaining (and nullish coalescing) as is. But I've got an error

Module parse failed: Unexpected token (2:10)
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.
| var a = { b: 2 };
> var c = a?.b;

I made a minimum reproduce repo inoyakaigor/webpack-typescript-optional-chaining

How I can avoid this error?

[alexander-akait]

It looks like you just deleted our lovely crafted issue template. It was there for good reasons. Please help us solving your issue by answering the questions asked in this template. I'm closing this. Please either update the issue with the template and reopen, or open a new issue.

[inoyakaigor]

@evilebottnawi Closing the issue because I removed the template looks like excessive bureaucracy.

However, I updated the description.

[mc0]

@evilebottnawi looks like @inoyakaigor updated the description and also provided a reproduction repo. I think we're hitting this same issue with optional chaining.

[ianschmitz]

For others that stumble on this issue, it looks like we're waiting on acornjs/acorn#891 and acornjs/acorn#890 before we stop transpiling this syntax via babel/tsc.

[ospfranco]

it looks like the mentioned issues on acorn have been merged, any news?

[yangmingshan]

@evilebottnawi Can we reopen this issue? Since this is a unresolved problem, it will help people find answers and let people track the progress.

[inoyakaigor]

Good news everyone! Acorn 7.3.0 with optional chaining support just released 2 hours ago! https://github.com/acornjs/acorn/blob/master/acorn/CHANGELOG.md

[ianschmitz]

Unfortunately webpack 4 uses acorn 6.x - not sure if we'll get this before webpack 5. Fingers crossed!

[alexander-akait]

Yes, it will be part of webpack@5

[OnurGvnc]

as a temporary solution;
https://github.com/OnurGvnc/acorn-with-stage3

package.json:

{
  ...
  "resolutions": {
    "acorn": "npm:acorn-with-stage3"
  },
  "dependencies": {

[jcready]

FYI to others that are considering using the acorn-with-stage3 solution #10227 (comment) just be aware that it breaks the built-in Split Chunks: Dynamic Imports. Presumably because the AST generated by acorn v7 (which acorn-with-stage3 uses) is different enough that webpack v4 cannot find the import() nodes to perform the splitting.