Production build can no longer be successfully completed after 2.2.2 upgrade

[atatarenko]

Hello there!

There is an error I can see after the recent changes made to the ESM/CJS build setup.
It takes place when I try to execute npm run build with NODE_ENV=production. Here is the output:

#29 2.550 Creating an optimized production build...
#29 40.40 Failed to compile.
#29 40.40 
#29 40.40 ./node_modules/usehooks-ts/dist/esm/useLocalStorage/useLocalStorage.js 53:65
#29 40.40 Module parse failed: Unexpected token (53:65)
#29 40.40 File was processed with these loaders:
#29 40.40  * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
#29 40.40 You may need an additional loader to handle the result of these loaders.
#29 40.40 | function parseJSON(value) {
#29 40.40 |   try {
#29 40.40 >     return value === 'undefined' ? undefined : JSON.parse(value ?? '');
#29 40.40 |   } catch (error) {
#29 40.40 |     console.log('parsing error on', {
#29 40.40 
#29 40.40 

I went down to the node_modules/usehooks-ts/dist/ folder and checked if there is any difference between the latest and the workable versions. There was a difference indeed:

In the latest 2.3.0, it was exactly as it is shown above:

try {
  return value === 'undefined' ? undefined : JSON.parse(value ?? '');
}

However in the last working 2.2.1, it was precompiled:

try {
  return value === 'undefined' ? undefined : JSON.parse(value !== null && value !== void 0 ? value : '');
}

I guess I could include the package in my local babel pipeline to mitigate the issue.
However, I'm not an expert in modern js build things and I'm not sure whether this issue should be solved on my side or yours.

[juliencrn]

Hi @atatarenko,

I think the #93 issue will help you :)

[atatarenko]

@juliencrn thank you for pointing to a similar issue. I'll check the mentioned suggestions and will post an update on whether one of them is helpful in my case.

[atatarenko]

It appeared that my Babel setup was already configured to handle the optional chain operator and null coalescing operator. What was not configured is the differentiation of the target browsers in the .browserslistrc.

So the previous version was:

last 2 chrome version

I changed it to:

[production]
defaults

[development]
last 2 chrome versions
last 2 firefox versions

With those updated settings, I no longer see an error during the production build assembly.

[juliencrn]

Great! Thanks @atatarenko !