How to overwrite babel's preset plugin options

Question

I'm using babel-preset-react-app via following .babelrc:

{
  "presets": ["react-app"],
  "plugins": [
    "transform-es2015-modules-commonjs",
    "transform-async-generator-functions"
  ]
}

I need to overwrite babel-plugin-transform-runtime options. I tried installing plugin and adding it to .babelrc in a following way:

{
  "presets": ["react-app"],
  "plugins": [
    ["babel-plugin-transform-runtime", {
      "helpers": false,
      "polyfill": false,
      "regenerator": false
    }],
    "transform-es2015-modules-commonjs",
    "transform-async-generator-functions"
  ]
}

but it doesn't work for me.

Is there any way I can do it without copy and pasting entire preset to my .babelrc?

score 1 · Answer 1 · answered Aug 01 '19 at 19:11

It seems that Babel doesn't currently support these sorts of overrides (see https://github.com/babel/babel/issues/8799). Fortunately I found a workaround for babel-preset-react-app. There is an undocumented option, useESModules:

['react-app', { useESModules: false }]

Here's a config using babel-plugin-react-app that works for node.js:

    presets: [
        ['react-app', { useESModules: false }],
        [
            '@babel/preset-env',
            {
                modules: 'commonjs',
                targets: {
                    node: 'current',
                },
            },
        ],
    ],

Of course, using babel-preset-react-app makes the most sense if you're using create-react-app for your client-side bundle. If you're not using create-react-app, then you could consider just using @babel/preset-react directly, in which case you wouldn't need to worry about overriding the useESModules setting.

How to overwrite babel's preset plugin options

1 Answers1