react monorepo shared styles/components: Component selectors can only be used in conjunction with @emotion/babel-plugin

[Codex-]

Current behavior:

Currently when attempting to share a style/component from a standard typescript transpiled package to a react app you're met with Component selectors can only be used in conjunction with @emotion/babel-plugin.

Adding babel to every package is the worst case, it is extremely slow and ideally, we'd use esbuild for everything in the future.

Currently, only the app itself uses babel. This issue still occurs when using something like craco or customize-cra to ensure the plugin for emotion is added to the app build.

To reproduce:

Minimum reproduction repository: https://github.com/Codex-/monorepo-react-emotion-issue

1. Create a monorepo with npm workspaces and typescript.
2. Create a package with an exported styled.div.
3. Create another package that consumes this exported styled.div and exports a simple component for an app to consume.
4. Create a standard app with create-react-app --template typescript and consume the exported component.
5. Explode.

Expected behavior:

Component selectors to work when the app uses babel with the plugin without forcing all packages to be coupled with babel.

I suspect the answer based on this will be "use babel for everything or don't use component selectors", which would be a huge shame when the gains of using esbuild (as an example) are so massive.

Environment information:

    "@emotion/css": "^11.1.3",
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "react": "^17.0.2"

Search Terms: npm workspaces Component selectors can only be used in conjunction with @emotion/babel-plugin monorepo Component selectors can only be used in conjunction with @emotion/babel-plugin packages not using babel Component selectors can only be used in conjunction with @emotion/babel-plugin

[ilchenkoArtem]

I have this error too

[mverissimo]

Hi, you can choose to use Babel Macros, look the example

[Codex-]

Hi, you can choose to use Babel Macros, look the example

Babel macros will only work if you're using babel.

Is there an agnostic solution? i.e. if I were to use esbuild? Or the stock transpiler?

Babel is egregiously slow.

[Jacky-Rolo]

@tema1411 @Codex-

Andarist 's another demo work for me to solve this error message, NO NEED @emotion/styled/macro, FYI

• https://github.com/emotion-js/emotion/issues/1899#issuecomment-679847315

Andarist, many many thanks your hard work

[dkumar431]

Is there any proper solution for this? Emotion looks like a lot of hacks to me compared to styled-components.

[srmagura]

@Codex-, I ran your code and the error message you are receiving is accurate: "Component selectors can only be used in conjunction with @emotion/babel-plugin".

This code (box.styles.ts) is using a component selector:

import styled from "@emotion/styled";
import { exampleStyle } from "@monorepo/shared-components";

export const BoxWrapper = styled.div`
  background-color: yellow;
  border: 1px solid red;
  box-sizing: border-box;
  height: 100%;
  position: relative;
  width: 350px;

  &:hover ${exampleStyle} {
    opacity: 1;
    visibility: visible;
  }
`;

Yet you are not using @emotion/babel-plugin anywhere.

BTW, the Next.js team has built an Emotion plugin for swc that supports component selectors. Or at least, it will support component selectors when it is done. I'm not sure what the current status is.

[dkumar431]

Am I missing something here? Why this issue has been closed? I am still getting this issue with typescript, nextjs and emotion. Does any able to solve this issue without the target hack?

[Andarist]

Please don't spam multiple issues at the same time with the same question.

[srmagura]

@dkumar431 issue is closed because the error message OP received was expected based on his/her build configuration.