Which babel plugins are installed by default?

[devinrhode2]

I would like to use all ecmascript stage-2 proposals and up, since they are quite likely to be included in the actual spec. And there's a variety of other babel plugins and things I'd also like to consider adding too. So, I have craco setup, I know this plugin exists, I just don't know what's already included with CRA and want to make sure I keep those same things included. But I don't want to install something that's already installed in CRA by default.

So here's what I've learned - maybe this issue could be linked to in the readme or something.

What's the base .babelrc that cra uses?

After running npm run eject my package.json has this babel config added:

  "babel": {
    "presets": [
      "react-app"
    ]
  }

Aside: @jackwilsdon - is it possible to put our babel config inside of our package.json file?

Next question is - what is the "react-app" preset? This is directory is the de-factor "react-app" babel preset package source: https://github.com/facebook/create-react-app/blob/master/packages/babel-preset-react-app I was surprised that it's such a small number of files. At first glance, babel packages seem to be clearly outlined here in the package.json: https://github.com/facebook/create-react-app/blob/master/packages/babel-preset-react-app/package.json:

"dependencies": {
    "@babel/core": "7.6.0",
    "@babel/plugin-proposal-class-properties": "7.5.5",
    "@babel/plugin-proposal-decorators": "7.6.0",
    "@babel/plugin-proposal-object-rest-spread": "7.5.5",
    "@babel/plugin-syntax-dynamic-import": "7.2.0",
    "@babel/plugin-transform-destructuring": "7.6.0",
    "@babel/plugin-transform-flow-strip-types": "7.4.4",
    "@babel/plugin-transform-react-display-name": "7.2.0",
    "@babel/plugin-transform-runtime": "7.6.0",
    "@babel/preset-env": "7.6.0",
    "@babel/preset-react": "7.0.0",
    "@babel/preset-typescript": "7.6.0",
    "@babel/runtime": "7.6.0",
    "babel-plugin-dynamic-import-node": "2.3.0",
    "babel-plugin-macros": "2.6.1",
    "babel-plugin-transform-react-remove-prop-types": "0.4.24"
  }

However, we see this includes 3 more presets....

Fortunately! There's docs for each of the babel presets here on babel's website. I might update this with a list of links for all these babel packages.

@jackwilsdon: Do we want to link to this in the readme? Do we want to try and put well-formed docs in your readme and maybe move those to the main create-react-repo later on?

[jackwilsdon]

What's the base .babelrc that cra uses?

Sadly this is embedded in CRA's webpack config, so it is a bit of a pain to extract. For example, CRA v3.1.2 has the following config:

{
  "presets": ["react-app"],
  "plugins": [
    [
      "babel-plugin-named-asset-import",
      {
        "loaderMap": {
          "svg": {
            "ReactComponent": "@svgr/webpack?-svgo,+titleProp,+ref![path]"
          }
        }
      }
    ]
  ]
}

craco-use-babelrc removes all presets but leaves plugins intact (maybe plugins should be removed too).

Do we want to link to this in the readme?

It might be worth providing a sample .babelrc in the README, yeah.

Do we want to try and put well-formed docs in your readme and maybe move those to the main create-react-repo later on?

I don't think create-react-app is planning on allowing people to configure their own .babelrc anytime soon, and as such I'm not sure what there is in this repository that would be useful in the official CRA repo.

[devinrhode2]

Just for anyone on a similar path... this is the .babelrc I ended up with+the missing named-asset plugin I didn't know cra adds on top of their react-app preset.. the if something doesn't work try removing named-asset-import plugin, as I'm not able to test adding that right now.

{
    "presets": [
        "react-app"
    ],
    "plugins": [
        // why "do expressions are the shiznit"
        "@babel/plugin-proposal-do-expressions",

        // prefer to use Object.lookup
        "@babel/plugin-proposal-optional-chaining",

        "@babel/plugin-proposal-nullish-coalescing-operator",
        "@babel/plugin-transform-react-jsx-source",
        [
            "babel-plugin-named-asset-import",
            {
                "loaderMap": {
                    "svg": {
                        "ReactComponent": "@svgr/webpack?-svgo,+titleProp,+ref![path]"
                    }
                }
            }
        ]
    ]
}

Inside my src/index.js file I also:

# see other import options here: https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#packages-entry-points-and-modules-names
import "core-js/stage/2"

# to match the old import "@babel/polyfill" we import core-js and this for generators
import "regenerator-runtime" 

to get String.replaceAll polyfill (currently stage 2)

I have not been able to test if our app still works in IE11, which we unfortunately have to support. I ended up disabling all the custom babel stuff thinking that was causing my ie11 issue, but I think only certain pieces here were causing issues. Not sure which pieces.