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

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' }
    },
  ],
],

Similar: #2592

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,
      },
    ],
  ],
};

allow for override settings for @babel/preset-env and regenerator fix…

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.

Will this be implemented?

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.

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

@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

https://github.com/facebook/create-react-app/blob/caf0a30e38d0cb9bbd2aab733efa0dd1aa6a9cb6/packages/babel-preset-react-app/create.js#L82-L89

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 😢

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.

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.

Sorry for offtop. Message to prevent issue from closing

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.

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.

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

heygrady commented on Oct 1, 2018

ivosabev commented on Oct 2, 2018

stale commented on Dec 8, 2018

ivosabev commented on Dec 9, 2018

heygrady commented on Jan 4, 2019

stale commented on Feb 7, 2019

ColCh commented on Feb 9, 2019

artsiompeshko commented on Feb 12, 2019

stale commented on Mar 14, 2019

ColCh commented on Mar 14, 2019

stale commented on Apr 13, 2019

stale commented on Apr 18, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions