You may need an additional loader to handle the result of these loaders

[jamime]

This is not a bug in carbon-react

Current Behaviour

create-react-app/react-scripts/webpack gives the following error.

Starting the development server...
Failed to compile.

./node_modules/carbon-react/lib/components/button/button.component.js 188:12
Module parse failed: Unexpected token (188:12)
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.
|     iconType: iconType,
|     size: size,
>     px: px ?? paddingX,
|     m: m,
|     noWrap: noWrap,

webpack is unable to parse the ?? known as nullish coalescing operator.

Now that all evergreen browsers support this @babel/preset-env will no longer transpile it unless you target an older browser. You may suddenly see this error after running npx browserslist@latest --update-db.

Solution

Some users have changed the browserlist to include an older browser that would transpile this, however this will result in other features being transpiled unnecessarily.

You also have the option of ejecting and upgrading webpack, this would require you to maintain the tooling going forwards, loosing the benefits of being able to upgrade react-scripts.

For most users I would recommend using craco which allows you to modify the react-scripts config without ejecting. Once react-scripts uses a newer version of webpack you'll be able to remove craco.

Note the ?? operator will be transpiled, even though the browser supports it.

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

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

and make the following changes to package.json.

"scripts": {
-   "start": "react-scripts start",
+   "start": "craco start",
-   "build": "react-scripts build",
+   "build": "craco build"
-   "test": "react-scripts test",
+   "test": "craco test"
}

Related Resources

facebook/create-react-app#9468

Confidentiality

• I confirm there is no confidential or commercially sensitive information included.