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

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

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

[ilchenkoArtem]

I have this error too