babel-preset-react-app doesn't support overriding targets

[heygrady]

I'm working on making react-scripts support SSR for my project. I can handle most of what I need by editing react-scripts itself but my server-side build is still using ie: 9 as the target because babel-preset-react-app doesn't allow for overriding the targets.

There was a recent discussion about ignoring the"browserslist" settings, but this is a different ask. I would like to have a way to specify a dev or prod build for my app for either node or browser.

Ideally I would be able to specify the targets as an option to babel-preset-react-app. This allows me to copy webpack.config.dev.js to webpack.config.dev-ser ver.js and make the small handful of changes necessary to target node.

(compare to webpack.config.dev.js)

presets: [
  [
    require.resolve('babel-preset-react-app/dependencies'),
    {
      helpers: true,
      // wouldn't it be nice to specify target
      targets: { node: 'current' }
    },
  ],
],

[heygrady]

Similar: #2592

[ivosabev]

I have a similar issue. I am trying to overwrite the useESModules: true to false in my babel.config.js without much success. Also submitted an issue to Babel (babel/babel#8799)

My config:

module.exports = {
  presets: ['@babel/env', 'react-app'],
  plugins: [
    [
      '@babel/plugin-transform-runtime',
      {
        corejs: 2,
        helpers: true,
        regenerator: true,
        useESModules: false,
      },
    ],
  ],
};

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[ivosabev]

Will this be implemented?

[heygrady]

I have published a fork for my own purposes: https://www.npmjs.com/package/@zumper/babel-preset-react-app

I went the route of adding a special “node” file that works like the existing “dependency” file.

You would replace a line like this: https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js#L357

presets: [require.resolve('@zumper/babel-preset-react-app/node')],

This will Babel-transform your files for use in a node environment.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[ColCh]

@ivosabev is seems this was implemented for 2.0 milestone

this comment #892 (comment) references browserlist for these entries

• Autoprefixer: Move browsers to cross-tool config #3644
• Babel: Loosen Babel preset to use browserslist #3770

But in master branch these settings are applied

create-react-app/packages/babel-preset-react-app/create.js

Lines 82 to 89 in caf0a30

	// We want Create React App to be IE 9 compatible until React itself
	// no longer works with IE 9
	targets: {
	ie: 9,
	},
	// Users cannot override this behavior because this Babel
	// configuration is highly tuned for ES5 support
	ignoreBrowserslistConfig: true,

and browserlist override don't works

it was added back here #5033 c9e1876#diff-7482288d6d13860f434d0b8171f20431

with this comment

Because of how tuned our babel configuration is we can't reliably let users target what browser's they'd like to support without everything else falling apart.
If we use just preset-env users are left with a suboptimal bundle or something that requires other configuration, so this is the best option for now.

cc @Timer please, can you elaborate on this?

I just wanted to exclude polyfills and ES5 in bundle, and this is impossible now 😢

[artsiompeshko]

For anyone who still experiences issues, as a temporary workaround, you can override targets with following:

babel/index.js

// overrides babel-create-react-app preset to deliver es6 code
// at the moment of writing babel-create-react-app preset didn't allow to override targets and used ie9 as a default

const babelReactApp = require('babel-preset-react-app'); // eslint-disable-line

module.exports = (api, opts) => {
  const env = process.env.BABEL_ENV || process.env.NODE_ENV;

  const isEnvDevelopment = env === 'development';
  const isEnvProduction = env === 'production';

  const config = babelReactApp(api, opts);

  // mutate babel-env-preset config for production and development
  if (isEnvProduction || isEnvDevelopment) {
    const envPresetConfig = config.presets.filter(preset => preset && preset[1] && preset[1].targets)[0][1];

    if (envPresetConfig) {
      envPresetConfig.useBuiltIns = false;
      envPresetConfig.ignoreBrowserslistConfig = false;
      // get from browserlistrc
      envPresetConfig.targets = null;
    }
  }

  return config;
};

and in bablerc

{
  // ...
  "presets": [
    "./babel"
  ],
  //...
}

Hovewer, still waiting for support from babel-create-react-app-preset to override such things.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[ColCh]

Sorry for offtop. Message to prevent issue from closing

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.