create-react-app: Nullish assignment (??=) not working in new project

The irony of Nullish Assignment being supported in every browser, but breaking via the very thing that’s meant to make future proofing codebases easier.

This is possibly now resolved.

i still get this error with react-scripts@4.0.1 installed… i’m interested in tips if anyone has working?

i have craco installed already so went looking for how to enable this in babel and tried simply including @babel/plugin-proposal-logical-assignment-operators via craco.config.js but that caused a ton of other errors.

module.exports = {
    babel: {
        plugins: [
            "@babel/plugin-proposal-logical-assignment-operators"
        ],
    }
}

im getting a similiar react-leaflet issue

im using next.js

/home/ju/projects/leaf/node_modules/@react-leaflet/core/cjs/pane.js:7
  const pane = props.pane ?? context.pane;
                           ^

SyntaxError: Unexpected token '?'

Reporting a similar error with react-leaflet:

./node_modules/.pnpm/@react-leaflet+core@1.1.0_91fa1427a3331e02931dfea77720a290/node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
File was processed with these loaders:
 * ./node_modules/.pnpm/babel-loader@8.1.0_427212bc1158d185e577033f19ca0757/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   useEffect(function updatePathOptions() {
|     if (props.pathOptions !== optionsRef.current) {
>       const options = props.pathOptions ?? {};
|       element.instance.setStyle(options);
|       optionsRef.current = options;

Out of nowhere, a coworker’s codebase started complaining over ||= usage - which was working before.

It seems related to a recently merged PR where I used NPM v7 by accident (on another machine) and it mixed up lock files… But even though node_modules is committed* (so we should have the exact same codebase), mine was working fine but his wasn’t.

I even made a fresh clone, and it wasn’t working either. I even compared both node_modules in Meld, no relevant changes (besides cache and a log file?). I have no clue why my old clone was working, but I finally gave up on investigating and on postponing “yet another hack on top of a hack” and went with CRACO as well.

* sorry if this hurts for you too, but some crazy devops guy in the company kinda forced us to commit it all in early days, talking about edge-edge scenarios 🤷

I have been having this problem when I deleted my package-lock.json in a non-create-react-app project, my suspicions so far are:

1. There is a bug in babel or @babel/parser 7.14
2. My own setup is similar to create-react-app (babel is a peer-dependency of my main project) and I have a diamond dependency problem where I actually have multiple versions of @babel/parser present

Confirmed to not work on none typescript projects as well.

react-scripts 4.0.1

We were able to temporarily solve this issue by using react-app-rewired (2.1.8) with @babel/plugin-proposal-logical-assignment-operators (7.12.1) plugin and the following config-overrides.js:

module.exports = {
  webpack: (config, env) => {
    const rules = config.module.rules.find(rule => !!rule.oneOf).oneOf;
    const babelLoaderRule = rules.find(rule => rule.loader.includes('babel-loader'));

    babelLoaderRule.options.plugins.push('@babel/plugin-proposal-logical-assignment-operators');

    return config;
  },
};

The config may vary, so you may want to do console.log(config); exit(); at first

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

I did upgrade react-scripts in my project to @latest (currently 5.0.0-next.47), and the error is gone. I wish to not meet this issue with another similar error when Babel ^7.16 will be released.

I got the same issue when I try to import my package to CRA project

./node_modules/@trakas/react/es/hooks/useLocalStorage.js 6:56
Module parse failed: Unexpected token (6:56)
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.
|     try {
|       const valueInString = localStorage.getItem(key);
>       return valueInString ? JSON.parse(valueInString) ?? initialValue : initialValue;
|     } catch {
|       return initialValue;

thanks for encouraging me to retry @pandomic… i can confirm corresponding craco config above does work as well

fyi, those previous errors mentioned were from a different issue - additional eslintConfig required after upgrading from react-scripts 3.4.3 to 4