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

[rokinsky]

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

[nghiepit]

I've encountered this issue. The problem with the recently Node version, example 14.10.1.
Please try to downgrade node: 13, or 12.

[rokinsky]

I've encountered this issue. The problem with the recently Node version, example 14.10.1.
Please try to downgrade node: 13, or 12.

Thanks. After downgrading to 13.14.0, the .next folder also had to be deleted. This worked fine on 9.5.3 next and 14 node, so I guess it still needs to be fixed.

[Timer]

I assume this was broken in https://github.com/vercel/next.js/pull/16780, but I'm not sure how tests passed.

[omBratteng]

@Timer I think it might be worth taking a look at the babel dependencies, checking if every dependency is updated at they support each other

[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! :)

[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.

[garretteklof]

FWIW I'm running into issues with optional chaining v9.5.3. Seems to be related to fast refresh (full refresh will preserve it)

[omBratteng]

@garretteklof should be fixed in 9.5.4