Problem with null coalescing operator in 2.6.5 release

[herndlm]

API Platform version(s) affected: 2.6.5

Description
After upgrading from 2.6.4 to 2.6.5 babel in our API Platform app complained about an unexpected token in node_modules. I think this is because the null coalescing operator from 0084ae3#diff-a510ff3025a65f9208998b879111392bde385c82d36cc828b71881751f5ca191R247 is not correctly transpiled in the latest release.

How to reproduce
Currently only can reproduce it locally by upgrading. Before I create a dedicated repo and so I want to rule out that this is just a very simple mistake in the admin build.

Possible Solution
I don't know enough about babel, but is there more config needed for that? Something related to ES2020 or so maybe?

Additional Context
The exact error is

./node_modules/@api-platform/admin/lib/hydra/dataProvider.js 243:138
Module parse failed: Unexpected token (243:138)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     }
| 
>     const extraInformation = ((_params$data = params.data) === null || _params$data === void 0 ? void 0 : _params$data.extraInformation) ?? {};
|     (_params$data2 = params.data) === null || _params$data2 === void 0 ? true : delete _params$data2.extraInformation;
|

[alanpoulain]

Are you using Babel yourself? If it is the case, the nullish coalescing operator should be transpiled in your generated code.

[herndlm]

Yes, it is an API Platform project scaffolded in late 2019 or so, initially based on API Platform 2.5 AFAIK.

I thought about that too, but the babel config must be coming internally from create react app or so. Can definitely be adapted somehow but I thought it's odd that this patch update makes it break.

[alanpoulain]

The nullish coalescing operator is relatively new, but it shouldn't be a problem if you update your dependencies on a regular basis.

[herndlm]

Deps should all be pretty up-to-date, at least babel and create-react-app and so are. But I'll take a deeper look again in a couple days to figure out what is going on there exactly.
Thx though for your help so far!

[herndlm]

I tried to further debug this, but did not get that far. Dependencies are definitely up-to-date and Babel supports transpiling ES2020 code, e.g. the following is working fine in the app code

const foo = null;
console.log(foo ?? 'bar');

But the app is built with create-react-app and all the webpack/babel stuff is hidden away inside react-scripts, which is also up-to-date in version 4.0.3.

yarn list --pattern @babel/core
yarn list v1.22.11
├─ @babel/[email protected]
├─ @jest/[email protected]
│  └─ @babel/[email protected]
├─ [email protected]
│  └─ @babel/[email protected]
├─ [email protected]
│  └─ @babel/[email protected]
└─ [email protected]
   └─ @babel/[email protected]
✨  Done in 0.76s.

I was looking at https://github.com/facebook/create-react-app/blob/v4.0.3/packages/react-scripts/config/webpack.config.js#L467 and then https://github.com/facebook/create-react-app/blob/v4.0.3/packages/babel-preset-react-app/dependencies.js#L69 and this looks like deps should be transpiled too. But no clue why it would fail with the react-admin code then..

[herndlm]

facebook/create-react-app#11339 and facebook/create-react-app#11434 might be related, I susbscribed to them and will update this issue if I find out something new.

[alexislefebvre]

I downgraded the dependency to avoid the issue:

npm install --save-exact @api-platform/[email protected]

Maybe upgrading our tools could avoid the error but I needed a quick solution.

[alanpoulain]

After digging, it's because CRA doesn't use Webpack 5. Webpack 4 is not able to understand the nullish coalescing operator.
See: webpack/webpack#10227 and https://github.com/facebook/create-react-app/milestone/81.
Maybe I will revert the use of this operator in the meantime.

[alanpoulain]

Changed in 2.6.6.