babel.config.main.js

const plugins = [
  '@babel/plugin-proposal-object-rest-spread', // allows ...spread notation
  '@babel/plugin-syntax-dynamic-import', // allows `await import()` syntax
  '@babel/plugin-proposal-export-default-from',
  '@babel/plugin-transform-runtime',
  '@loadable/babel-plugin',
];

// allows dynamic `import()` in Node tests.
if (process.env.NODE_ENV === 'test') {
  plugins.push('dynamic-import-node');
  plugins.push('@babel/plugin-proposal-throw-expressions'); // allows `throw new Error();`
}

const overrides = [
  {
    test: /.*logger\..*/,
    sourceType: 'script',
  },
];

module.exports = api => {
  const env = api.env();
  const useModern = env === 'modern';

  const presets = [
    [
      '@babel/preset-env',
      {
        targets: {
          ...(useModern
            ? {
                browsers: ['safari > 12', 'supports es6-module'],
              }
            : {
                browsers: [
                  'chrome >= 53',
                  'firefox >= 45.0',
                  'ie >= 11',
                  'edge >= 100',
                  'safari >= 10',
                  'opera >= 40',
                  'op_mini >= 18',
                  'Android >= 7',
                  'and_chr >= 53',
                  'and_ff >= 49',
                  'ios_saf >= 10',
                ],
              }),
          node: 'current',
        },
        // analyses code & polyfills only the features that are used, only for the targeted browsers
        useBuiltIns: 'usage',
        corejs: '3',
      },
    ],
    '@babel/preset-react', // transform JSX to JS
    '@babel/preset-typescript',
    '@emotion/babel-preset-css-prop',
  ];

  return {
    presets,
    plugins,
    overrides,
  };
};