Emotion: customize-cra + new JSX babel configuration not working

[baeharam]

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]

I have found out in the past that trying to customize the create-react-app template on CodeSandbox just doesn't work correctly - the standard CRA setup is just enforced so no changes that you make are actually reflected on the given sandbox.

Please prepare a working repro case for this in form of a repository that I could clone. Please note though that there is really no way that this could be the Emotion issue and it's purely a misconfiguration problem in your toolchain. I would appreciate if you try to debug this on your own.

[baeharam]

@Andarist Thanks for comment!

I would appreciate if you try to debug this on your own.

I wanna solve this problem on my own, but cannot solve even if I followed all configurations. I made reproduction repo and you can test by running yarn start after cloning repo. Emotion is not applied with customize-cra.

[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.

[awehook]

I also encountered the same problem, is your problem solved?

[baeharam]

@Andarist Thanks! It solved my problem :) @awehook You can use @Andarist 's solution 🚀

[felschr]

I'm still getting the error Error: Component selectors can only be used in conjunction with @emotion/babel-plugin. after using @Andarist's config-overrides.js and the following .babelrc:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript",
    [
      "@babel/preset-react",
      { "runtime": "automatic", "importSource": "@emotion/react" }
    ]
  ],
  "plugins": [ "@emotion/babel-plugin" ]
}

Can someone share their working .babelrc?

[felschr]

As a workaround we've removed all component selectors from our codebase.
We'd like to revert it again as it's an important feature for us, but we weren't able to find an actual fix.