webpack: Unexpected token error at code with optional chaining when using Typescript

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.

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

However, I updated the description.

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

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

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

package.json:

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

Maybe I am missing something, but doing this did not fix the issue for me. I still get the same unexpected token at each use of optional chaining I have in my code.

EDIT: After investigation, I came to understand you are using Yarn, but I am not. So the resolutions section wouldn’t be considered by npm alone. I could fix the problem with npm by installing https://www.npmjs.com/package/npm-force-resolutions, and then adding the following to my package.json:

"scripts": {
    "preinstall": "npx npm-force-resolutions",
},
"resolutions": {
    "acorn": "8.0.1"
},

Based on @sboisse temporary solution, in Yarn we just need resolution part,

"resolutions": {
    "acorn": "8.0.1"
},

After that, just run yarn install.

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

package.json:

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

Yes, it will be part of webpack@5

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

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

The world has moved onto to use optional chaining in npm packages. Like people have said this has to do with a limitation with builds using webpack versions 4 or earlier.

To resolve this issue for legacy builds that use webpack v4, add @babel/plugin-proposal-optional-chaining to your babel plugins and set the resolution for acorn package to 7.3.0 or later.

FYI to others that are considering using the acorn-with-stage3 solution https://github.com/webpack/webpack/issues/10227#issuecomment-653408484 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.

I’m getting the same error-

Module parse failed: Unexpected token (363:46)
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.

tsconfig.json-