craco babel settings not working @emotion/react

[leesuhyung]

// emotion css prop is not working
module.exports = {
  babel: {
    presets: [
      [
        '@babel/preset-react',
        {'runtime': 'automatic', 'importSource': '@emotion/react'}
      ]
    ],
    plugins: ['@emotion/babel-plugin']
  },
  plugins: [
    {
      plugin: CracoEsbuildPlugin,
    },
    ...
  ],
}

// it works
module.exports = {
  babel: {
    presets: [
      [
        '@babel/preset-react',
        {'runtime': 'automatic', 'importSource': '@emotion/react'}
      ]
    ],
    plugins: ['@emotion/babel-plugin']
  },
  ... // use the default babel settings of react-script instead of esbuild
}

When I use craco esbuild, cannot use css props in emotion. Is the craco esbuild plugin clearing babel settings?

[pradel]

Yes, esbuild is replacing babel totally.

[leesuhyung]

@pradel Sorry to bother you, is there any way to use babel preset while using esbuild?

[pradel]

Maybe there you can see how but I never did this https://github.com/privatenumber/esbuild-loader/issues/99