babel.config.js

const defines = require('./babel-defines')

function replacementPlugin(env) {
  return [
    'babel-plugin-transform-replace-expressions',
    { replace: defines[env] }
  ]
}

const sharedPlugins = [
  'preval',

  // install others if you need:
  // 'add-react-displayname',
  // 'babel-plugin-styled-components',
  // '@babel/plugin-proposal-nullish-coalescing-operator',
  // '@babel/plugin-proposal-optional-chaining',

  [
    'module-resolver',
    {
      root: ['./'],
      extensions: [
        'ts',
        'tsx',
        '.js',
        '.jsx',
        '.json',
        '.svg',
        '.png',
        '.jpg',
        '.jpeg'
      ],
      alias: {
        '@': './src/'
      }
    }
  ]
]

function makePresets(moduleValue) {
  return [
    [
      '@babel/preset-env',
      {
        modules: moduleValue,
        targets: {
          browsers: ['> 1%', 'last 2 versions', 'not ie <= 8']
        }
      }
    ],
    '@babel/preset-typescript',
    ['@babel/preset-react', { runtime: 'automatic' }]
  ]
}

module.exports = {
  env: {
    development: {
      presets: makePresets(process.env.BABEL_MODULE || false),
      plugins: [
        ...(process.env.BABEL_MODULE === 'commonjs'
          ? ['@babel/plugin-transform-modules-commonjs']
          : process.env.STORYBOOK
          ? []
          : [
              'transform-commonjs' // theme-preval is commonjs and needs to be transformed to esm
            ]),
        ...sharedPlugins,
        replacementPlugin('development')
      ]
    },
    production: {
      presets: makePresets(false),
      plugins: [...sharedPlugins, replacementPlugin('production')]
    },
    test: {
      presets: makePresets('commonjs'),
      plugins: [
        ...sharedPlugins,
        ['@babel/plugin-transform-modules-commonjs'],
        replacementPlugin('test')
      ]
    }
  }
}