?? Operator results in "Unexpected Token" err when used in package

[arogozine]

Describe the bug

If you import a package that uses ?? operator in code, create react app will fail when debugging.

This issue seems to appear only when debugging with such a library. (npm run start)

It builds (npm run build) without errors. So the toolchain for start vs build is in question here.

The operator works fine if used directly - not in the imported library code.

Did you try recovering your dependencies?

Issues occurred with multiple CRAs even with reinstalling node modules.

Which terms did you search for in User Guide?

Null Coalescing Operator Create React App There seems to be an issue about optional chaining.

Environment

Windows 10 10.0.17763 npm 6.14.5 node 14.4.0 Google Chrome was used to ensure async, let, const, classes, and ?? support.

Steps to reproduce

1. Create a React App with TypeScript (Haven't tried without TS)
2. Create NPM package (TS with target ESNext, module, commonjs, declaration) that uses the ?? operator
3. Use package in your app.
4. Run start script

Expected behavior

The application should compile and run successfully when started or when built..

Actual behavior

The application fails to compile due to the ?? in the library.

Failed to Compile, Unexpected token You may need an additional loader to handle the result of these loaders.

Reproducible demo

If needed I can brew something up. This was found in a work project.

[ferm12]

My solution to the [?? Operator results in "Unexpected Token"] ERROR was to install @babel/plugin-proposal-logical-assignment-operators and @babel/plugin-proposal-nullish-coalescing-operator npm install --save-dev @babel/plugin-proposal-logical-assignment-operators @babel/plugin-proposal-nullish-coalescing-operator then added to the babel.config.js file:

  presets: [
    [
      '@babel/preset-env',
      {
        modules: false,
      },
    ],
    '@babel/preset-react',
  ],
  plugins: [
    'styled-components',
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-proposal-nullish-coalescing-operator',   
    '@babel/plugin-proposal-logical-assignment-operators',
  ],
  env: {
    production: {
      only: ['app'],
      plugins: [
        'lodash',
        'transform-react-remove-prop-types',
        '@babel/plugin-transform-react-inline-elements',
        '@babel/plugin-transform-react-constant-elements',
        '@babel/plugin-proposal-nullish-coalescing-operator',   
        '@babel/plugin-proposal-logical-assignment-operators',
      ],
    },
    test: {
      plugins: [
        '@babel/plugin-transform-modules-commonjs',
        'dynamic-import-node',
      ],
    },
  },
};```

[shahsawar92]

Thanks this answer worked!

https://stackoverflow.com/a/67747605

Like @ferm12, you said @babel/plugin-proposal-nullish-coalescing-operator this solved the issue for me

[ferm12]

@shahsawar92 I am glad you were able to solve your problem.

[chaitanya71998]

@ferm12 i am having an old repo which is at react 16 version. the above issue is still persisting even though I updated the configs in babel

dependencies{
      "react": "^16.12.0",
      "react-scripts": "3.2.0",    

babel.config.js

module.exports = {
   presets: ['@babel/preset-env'],
   plugins: [
      [
         '@babel/plugin-proposal-decorators',
         {
            legacy: true
         }
      ],
      '@babel/plugin-proposal-nullish-coalescing-operator',
      '@babel/plugin-proposal-logical-assignment-operators'
   ]
}

what is the issue here? is it with react versions? Could you give solution to this? TIA.

[Chaoste]

I just had this issue while using node 12 in an old environment, nvm i 18 && nvm use 18 solved it for me after the browserlist change didn't fix it in my case.

[dhiren-eng]

The cause is exactly the same as #8526 which added support for nullish coalescing in the developers code (e.g. App.js) but not in node_modules.

Now that it is supported by all evergreen browsers it is reasonable to assume that there will be some NPM packages that do not transpile this.

I think the changes in #8526 should be added to https://github.com/facebook/create-react-app/blob/main/packages/babel-preset-react-app/dependencies.js until react-scripts is using a newer version of webpack that can handle this syntax.

I didn't want to change my browserslist because it would transpile other code unnecessarily, so I used CRACO.

npm install @babel/plugin-proposal-nullish-coalescing-operator --save-dev

// craco.config.js
module.exports = {
  babel: {
    plugins: [["@babel/plugin-proposal-nullish-coalescing-operator"]],
  },
};

@jamime Just curious if the whole node_modules are also parsed by a babel plugin would'nt it make it slower to start react app in dev mode or make hot reloading slower ?