error serving react app using react-app-wired

332 Views Asked by At

I have a react application created with create-react-app using react-data-grid@7. Since canary17 they started to use es2020 modules, to using the more recent builds I have to add support to optional-chaining and nullish-coalescing-operator to the app, otherwise I have errors starting the app.
After a few searchs, I installed customize-cra and react-app-rewired, changed the scripts commands to

"start": "react-app-rewired start"     
"build": "react-app-rewired build"   

and added this config-overrides.js

const {
    override,
    addBabelPlugin
 } = require("customize-cra");

 module.exports = override(
    addBabelPlugin("@babel/plugin-proposal-optional-chaining"),
    addBabelPlugin("@babel/plugin-proposal-nullish-coalescing-operator"),
 );

Trying to run the app I obtain a strange behavior. using the start command I obtaing the same error, but if I build and the deploy the app works correctly.
If I add something wrong in the config-overrides.js and try to start run start I received an error message, so I think the file is loaded.

Am I missing something?

1

There are 1 best solutions below

0
On

After a few tests I found the solution changing from

addBabelPlugin("@babel/plugin-proposal-optional-chaining"),
addBabelPlugin("@babel/plugin-proposal-nullish-coalescing-operator"),

to

addExternalBabelPlugin(["@babel/plugin-proposal-optional-chaining", { "loose": false }]),
addExternalBabelPlugin(["@babel/plugin-proposal-nullish-coalescing-operator", { "loose": false }]),

I added the loose parameter too, but it was not the problem. now looks like works both in serve and build