How do I enable .babelrc for JSS

Question

Coming from C#, I really like the below code

var prop = item.prop?.propname

Syntax.

This is supported in JS if you use the below code

@babel/plugin-proposal-optional-chaining

Babel plugin.

However, if you just create .babelrc file JSS does not use this. How do I make this work?

Answer 1

Someone named @aweber1 on slack #jss pointed me in the correct direction:

The JSS React sample app is based on create-react-app (CRA) https://github.com/facebook/create-react-app, which does not provide any "official" mechanisms for overriding or extending any of the configuration used by CRA. The formal recommendation from CRA is to "eject" your app, which allows you directly modify webpack and other configuration.

However, there are also community-built libraries that allow you to extend/modify the CRA config without ejecting. In particular: • https://github.com/timarney/react-app-rewired • https://github.com/harrysolovay/rescripts • https://github.com/sharegate/craco

I was able to get craco to work, but it was a bit more involved.

1. npm i @craco/craco -D
2. npm i @babel/plugin-proposal-optional-chaining -D
3. create .babelrc

{
  "plugins": [
    "@babel/plugin-proposal-optional-chaining"
  ]
}

4. update the scripts section of package.json switch

  react-scripts start=> craco start
  react-scripts build => craco build
  react-scripts test=> craco test

5. update /sitecore/definitions/config.js set: babelrc: true,
6. update /server/server.webpack.config.js set: babelrc: true,

Check that jss start and jss deploy files both work.