babel.config.js

module.exports = function (api) {
  api.cache(true);

  const plugins = [
    // '@loadable/babel-plugin',
    ['babel-plugin-twin'],
    [
      'macros',
      {
        isMacrosName: (v) => {
          return v === 'twin.macro';
        },
      },
    ],
    [
      'formatjs',
      {
        idInterpolationPattern: '[sha512:contenthash:base64:6]',
        ast: true,
      },
    ],
    [
      'babel-plugin-styled-components',
      { ssr: true, displayName: true, preprocess: false },
    ],
    '@babel/plugin-transform-destructuring',
    '@babel/plugin-transform-runtime',
    '@babel/plugin-transform-regenerator',
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-syntax-export-default-from',
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-object-rest-spread',
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-proposal-export-default-from',
    'babel-plugin-add-module-exports',
  ];

  const presets = [
    '@babel/preset-env',
    [
      '@babel/preset-react',
      {
        runtime: 'automatic',
        development: process.env.NODE_ENV === 'development',
      },
    ],
    '@babel/preset-typescript',
  ];

  return {
    plugins,
    presets,
    babelrcRoots: ['.', 'apps/*'],
  };
};