[9.5.4-canary.20] default loader doesn't transpile nullish coalescing and optional chaining

Bug report

Describe the bug

Loader next-babel-loader doesn’t transpile nullish coalescing operator and optional chaining on canary

To Reproduce

Repository: next.js-bug-nullish-coalescing Steps to reproduce the behavior:

1. Go to http://localhost:3000
2. See error
3. Go to http://localhost:3000/about
4. See error

Expected behavior

Don’t see the errors.

Screenshots

System information

• OS: macOS
• Browser (if applies): chrome
• Version of Next.js: 9.5.4-canary.20
• Version of Node.js: 14.2.0

Additional context

Works with 9.5.3

[JLHwung]

It is thrown since preset-env skips optional-chaining . It is intended because the environment supports optional chaining natively, (e.g. last 2 chrome). However in order to parse import and export and evaluation expressions like process.env.NODE_ENV, webpack will parse the Babel transpiled code via acorn. Since optional-chaining is skipped, the error is thus thrown from acorn. Webpack@4 uses acorn@6 which does not support optional chaining.

I have open a PR to bump acorn to 8.0.1 in webpack 4: https://github.com/webpack/webpack/pull/11550.

Before it is merged. Choose one of the workaround according to your risk preference.

Workaround a): update webpack to 5.0.0-rc.1 Workaround b): resolve acorn to 8.0.1, check npm-force-resolutions or yarn resolutions Workaround c): update next.js to 9.5.4-canary.23 Workaround d): add the following to the "include" config of "@babel/preset-env"

{
  "presets": ["@babel/preset-env", {
    "include": [
      "@babel/plugin-proposal-optional-chaining",
      "@babel/plugin-proposal-nullish-coalescing-operator",
      "@babel/plugin-proposal-numeric-separator",
      "@babel/plugin-proposal-logical-assignment-operators"
    ]
  }]
}

Workaround e): remove all ES2020 features from your source code, wait until you are comfortable to update deps.

[wiesson]

Hmm, I still have this issue with v14.12.0 and Typescript 4.0.3 after https://github.com/vercel/next.js/pull/17429 was merged.

error - ./src/utils.ts 74:29
Module parse failed: Unexpected token (74:29)
File was processed with these loaders:
 * ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js
You may need an additional loader to handle the result of these loaders.
|     return {
|       id: item.name.match(/\d{6}/)[0],
>       slug: item.fields.slug?.stringValue || "",
|       title: item.fields.publicTitle?.mapValue.fields[lang].stringValue || "",
|       subTitle: item.fields.publicSubtitle?.mapValue.fields[lang].stringValue,

Edit:

Thanks. After downgrading to 13.14.0, the .next folder also had to be deleted.

This was missing. Works! 😃