Error with browserslist and optional chaining/nullish-coalescing

[francescocaveglia]

What is the current behaviour? Adding a broswerslist config like this causes errors on optional chaining or nullish coalescing syntax

  "browserslist": [
    "> 1%",
    "last 3 Chrome major versions",
    "last 3 Firefox major versions",
    "last 3 Safari major versions",
    "last 2 Edge major versions",
    "last 3 ChromeAndroid major versions",
    "last 3 iOS major versions"
  ],

× ERROR ./components/header/index.tsx 7:25
Module parse failed: Unexpected token (7:25)
File was processed with these loaders:
 * ../node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   class: style.header
| }, h("h1", null, "Preact App"), h("nav", null, h(Link, {
>   activeClassName: style?.active,
|   href: "/"
| }, "Home"), h(Link, {
 @ ./components/app.tsx 3:0-30 10:5-11
 @ ./index.ts

× ERROR ./components/header/index.tsx 7:33
Module parse failed: Unexpected token (7:33)
File was processed with these loaders:
 * ../node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   class: style.header
| }, h("h1", null, "Preact App"), h("nav", null, h(Link, {
>   activeClassName: style.active ?? '',
|   href: "/"
| }, "Home"), h(Link, {
 @ ./components/app.tsx 3:0-30 10:5-11
 @ ./index.ts

Steps to Reproduce Steps to reproduce the behavior:

1. Generate a new project with npx preact-cli create typescript <project>
2. Set above browserslist config
3. Add optional chaining or nullish coalescing syntax somewhere
4. run npm run build

[rschristian]

This is an issue in Webpack v4, without any real solution for the time being: https://github.com/webpack/webpack/issues/10227

Essentially, as you've raised the browserlist targets so that optional chaining isn't transpiled out, Webpack (or rather, Acorn) ends up attempting to parse them which it cannot.

[rschristian]

Closing, fixed in v4