customize-cra + new JSX babel configuration not working

Current behavior:

In docs of css-prop, I can setup babel configuration without inserting JSX pragma to every files. To do this, I installed customize-cra and override babel configuration using .babelrc and config-overrides.js. However, it isn’t working as expected and just showing error message like below.

You have tried to stringify object returned from css function. It isn’t supposed to be used directly (e.g. as value of the className prop), but rather handed to emotion so it can handle it (e.g. as value of css prop).

To reproduce:

https://codesandbox.io/s/customize-cra-emotion-snlzn

Expected behavior:

css prop should work as expected

Environment information:

You can see versions of packages in above reproduction.

THX

[Andarist]

Your config-overrides.js should look like this:

const { override, useBabelRc, getBabelLoader } = require('customize-cra');

const removeBultinBabelConfig = config => {
  getBabelLoader(config).options.presets = [];
  getBabelLoader(config).options.plugins = [];
  return config;
}

module.exports = override(removeBultinBabelConfig, useBabelRc());

Please just re-add everything that you need to your babelrc because this removes builtin babel-preset-react-app.

[lacomparte]

my ‘config-overrides.js’ file it’s perfect!

const { override, addWebpackAlias, addBabelPlugins, useBabelRc } = require('customize-cra');
const path = require('path');

const emotionPresetOptions = {
  sourceMap: true,
  autoLabel: 'dev-only',
  labelFormat: '[local]',
  cssPropOptimization: true,
};

const emotionbabelPreset = require('@emotion/babel-preset-css-prop').default(
  undefined,
  emotionPresetOptions,
);

module.exports = {
  webpack: override(
    useBabelRc(),
    ...addBabelPlugins(...emotionbabelPreset.plugins),
    addWebpackAlias({
      _: path.resolve(__dirname, 'src'),
    }),
  ),
};