Nullish assignment (??=) not working in new project

[mhale1]

Typescript 4 supports the nullish assignment operator (??=). Creating a new Typescript project with CRA 4 supports this operator in the editor, but when running yarn start it gives a Webpack parsing error.

I asked on SO here and they confirm the bug and suggest it requires a Babel upgrade.

Steps to reproduce:

1. Create a new project with Typescript
2. Add the following lines into App.tsx:

const test = { a: 1 };
test.a ??= 2;

3. Run yarn start

Expected result:
App starts

Actual result:

Module parse failed: Unexpected token (14:10)
File was processed with these loaders:
 * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js  
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.

[razzfox]

This is possibly now resolved.

[Beej126]

i still get this error with [email protected] 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"
        ],
    }
}

[macksal]

Bump: still present in 4.0.1. I think an upgrade to babel-loader would fix this.

[pandomic]

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

[Beej126]

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

[asterikx]

Still present in 4.0.1

[kellengreen]

Confirmed to not work on none typescript projects as well.

[bhishp]

This error was being reported to me but for another reason, just in-case anyone is having the same issue.

It was due to my IDE auto-importing in a foolish way. It set the path to outside of the src directory and then reached back-in.

// import { sectionTheme } from '../../src/components/chakra/section'; // The auto-import that broke things
import { sectionTheme } from '../components/chakra/section'; // replaced with this

I suspect maybe the CRA config runs things through a different loader in they're not under src maybe so it didn't run the correct ts loader.

[hckhanh]

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;

[DanielHoffmann]

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

[krotovic]

My PR #10832 should fix this issue. We have to wait for review.

[DylanCulfogienis]

Reporting a similar error with react-leaflet:

./node_modules/.pnpm/@[email protected]_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/[email protected]_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;

[weiliang903]

i still get this error with [email protected] 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"
        ],
    }
}

Nice, It's working for me. [email protected]

While using the @babel/plugin-proposal-nullish-coalescing-operator plugin (included in @babel/preset-env)

[JulienMartel]

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 '?'

[kandipierre]

I'm having the same issue as @JulienMartel. Are there any updates on the resolution of this?

[weiliang903]

@JulienMartel @kandipierre
You may need to add @babel/plugin-proposal-logical-assignment-operators manually.
Babel Doc

[kandipierre]

@JulienMartel @kandipierre
You may need to add @babel/plugin-proposal-logical-assignment-operators manually.
Babel Doc

yes I added this manually and it fixed my issue. Thanks @weiliang903.

[igorsantos07]

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 🤷

[Vovan-VE]

Ok, now I really woundered. It must be explained as a dark magic and nothing else.

My CRA project just worked fine about 10 minutes ago, but after a subsequent "Save All" in IDE the project became display the syntax error described in this Issue to any first occurrence of ??, ??=, ||=, etc. The last changes before "Save All" did touch comments only. Reverting that changes does not help. The issue is surely don't depend on that changes. So, exactly the same code worked 10 minutes ago now cause a syntax error.

The real mystic is that both success and error states was encountered in the same npm start instance. There was no restarts for npm start, and none of package.json, package-lock.json, node_modules/, npm and node was touched in almost a month.

However, npm test and npm run build both are still working properly.

I've already tried npm ci, manually delete node_modules/, npm cache verify and even npm cache clean --force - nothing changed: it still reports the syntax error in npm start and success in npm test and npm run build.

I don't believe in magic. But what else could cause this stupid situation when nothing was changed and it switched from success to error in same npm start instance?

NodeJS: 14.16.0
npm: 7.24.1
react-scripts: 4.0.3
typescript: 4.2.4
// no craco or anything similar

[Vovan-VE]

I'm not sure, whether the following attempts are correct at all, however I tried the following and it did not help:

• Force downgrade all of nested @babel/* >=7.13 to ~7.12. Nothing changed but size of production build.
• Force down/upgrade all of @babel/* to ~7.14. Then npm test, npm run build and npm start are failing with another error not in my app's code.

[Vovan-VE]

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.

[kellengreen]

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.

[stale]

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.

[blimmer]

Adding my 👍 to remove the stale label. It seems like #10832 would fix this issue, but it's awaiting review.