[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

[nghiepdev]

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 #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 #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: webpack/webpack#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

[kryptonian41]

I am facing a strange issue

./node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   useEffect(function updatePathOptions() {
|     if (props.pathOptions !== optionsRef.current) {
>       const options = props.pathOptions ?? {};
|       element.instance.setStyle(options);
|       optionsRef.current = options;

The build is working fine on my local environment with node version 12.16.1, but on my deployment server, it's failing with the above error. The node version on the server is also 12.16.1.

Strangely, I have used the nullish coalescing operator in my typescript component files before and I never faced any build issues. But recently I have included the @react-leaflet/core package in my application which uses the ?? operator in js files. Can that be the reason why this is happening?

I am using [email protected]

@omBratteng @Timer

UPDATE: After looking around, I realized that babel is not used to transpile the node modules and hence the error. And webpack 4 does not support nullish coalescing operator . Here is a link to the corresponding issue on react-leaflet's repo: PaulLeCam/react-leaflet#883

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.