2

So i started a new CRA project and I'm using the TS beta to get some sweet features like the chaining operator, but i also want to use nullish-coalescing-operator ifExists ?? elseUseThis

Unfortunately it didn't work out of the box and told me to install the babel plugin, but after adding it to .babelrc, it still didn't work.

Is there no way to add this support in Create React App?

Sophie McCarrell
  • 2,831
  • 8
  • 31
  • 64

2 Answers2

3

CRA will not read your .babelrc.

Without ejecting the usual way is to use this two packages:

npm install --save-dev react-app-rewired customize-cra

Alter the scripts-section in package.json:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
},

Then you can install your preferred babel plugin:

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

Then create a config-overrides.js file in the root directory.

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

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

The 'internal' babel from CRA will be extended.

Consult the docs on github from the installed packages for further investigation:

react-app-rewired

customize-cra especially the api-docs (e.g. passing an array of plugins, caveats regarding the use of plugins in test-scripts ...)

I have tested this with a fresh created App with CRA and it works like a charm. As i used Javascript it should work with Typescript in a similar manner.

tweini
  • 806
  • 8
  • 12
1

Thanks Tweini for the answer for older version before 3.3.0.

For newer versions of CRA [incuding if you update your react scripts], this feature is supported!

https://github.com/facebook/create-react-app/releases/tag/v3.3.0

Sophie McCarrell
  • 2,831
  • 8
  • 31
  • 64