Emotion: Component selectors not working with `@emotion/babel-preset-css-prop`

[IsenrichO]

• @emotion/core version: ^10.0.10
• @emotion/styled version: ^10.0.11
• @emotion/babel-preset-css-prop version: ^10.0.9
• react version: ^16.8.4

Relevant code:

import styled from "@emotion/styled";

export const Text = styled.div`
  opacity: 1;
`;

export const Main = styled.div`
  ${Text} {
    color: red;
  }
`;

What you did:
First off, thank you all for your tireless work on the emotion library. It's an excellent set of packages!

In trying to complete the upgrade to emotion v10 in a private codebase. I'm mostly there except for one key issue that I've run into. Namely, component selectors don't seem to be supported when using @emotion/babel-preset-css-prop.

It may be relevant to include that I'm also working in a TypeScript project.

What happened:
Error is thrown. Error message reads:

Uncaught Error: Component selectors can only be used in conjunction with babel-plugin-emotion.

This is an unexpected error because I am using @emotion/babel-preset-css-prop which already uses babel-plugin-emotion under the hood.

Reproduction:
Link to repro

Suggested solution:
Not familiar enough with emotion codebase to recommend a solution but happy to take a crack at it.

[fnky]

I have the same issue, but with @emotion/babel-plugin-emotion directly, without the use of @emotion/babel-preset-css-prop.

[IsenrichO]

@mitchellhamilton @tkh44 (and other maintainers I've missed). I want to thank you all for the incredible work you guys do in making this incredible package! Emotion has been a blessing for my team.

On the topic of this issue, I'm sure you all are busy and so I'm happy to contribute. I'm not too familiar with the codebase, however. Would someone be able to give me some guidance on beginning to fix this?

[fnky]

I think I solved the problem on my end. I changed my tsconfig, to use esnext as module output:

{
  "module": "esnext",
  "moduleResolution": "node"
}

And let Babel handle the transpilation of module imports.

[IsenrichO]

That's actually already what I had in my settings so no luck for me unfortunately. :(

[Andarist]

@IsenrichO Your repro is using CRA (codesandbox.io uses its config) - that means that the babelrc you have created there is not even loaded because CRA doesn't support babel config customization. Once I've made this babelrc being loaded (by tweaking node_modules contents - I've removed this) it has started to work.

[IsenrichO]

Ahh interesting. Thank you @Andarist, that's information I didn't realize. I'm not sure how to edit the CodeSandbox to not apply create-react-app under the hood so I'm not able to easily update my repro to better match the actual environment of my application where I encounter the problem.

However, I do have a different suspicion about why I still have the issue in my app (under GH enterprise, so I can't easily share it unfortunately). We don't use CRA there. Our app uses Lerna where we have a main src package (basically, the application code), a storybook package and a style package. Since we need the same theming available in both the storybook and src packages, we created the style package as a way to export a single styled instance using CreateStyled with our custom theme. We then use it as import styled from '@cms/style'; throughout the monorepo.

Do you think that importing this custom styled instance instead of directly from @emotion/styled could possibly be a cause of the issue? Again, apologies for not being able to provide you with a better repro and thanks for your time.

[Andarist]

Yes, that's the most probable problem - there is an open PR which will help you once it gets merged in: https://github.com/emotion-js/emotion/pull/1220 . There is not ETA for this yet though.

[Andarist]

Closing this right now - because the mentioned #1220 is supposed to fix this and I will be working this month to land this. It will be a part of the upcoming v11 release.

[IsenrichO]

Nice. Can't wait.

[andreluisce]

I think I solved the problem on my end. I changed my tsconfig, to use esnext as module output:

{
  "module": "esnext",
  "moduleResolution": "node"
}

And let Babel handle the transpilation of module imports.

Tks that worked for me.