Unable to render emotion component with component selector in monorepo

[Newbie012]

Current behavior:
(Sorry in advance if the title isn't clear enough)

I have a monorepo with 3 packages:

• packages/theming - responsible for re-exporting emotion/styled and emotion/react to the other packages with the theme.
• packages/design-system - prebuilt UI components based on packages/theming
• packages/my-app - imports and uses both theming and design-system.

In addition, my-app is configured with the following babel config (via @vitejs/plugin-react):

plugins: [
  [
    "@emotion",
    {
      importMap: {
        theming: {
          styled: { canonicalImport: ["@emotion/styled", "default"] },
          css: { canonicalImport: ["@emotion/react", "css"] },
          Global: { canonicalImport: ["@emotion/react", "Global"] }
        }
      }
    }
  ]
]

When writing the following code, everything seems to be ok:

const Wrapper = styled.div`
  ${Child} {
    border: 1px solid;
  }
`;

function App() {
  return (
    <Wrapper>
      <Child>I'm a child</Child>
    </Wrapper>
  );
}

But whenever I try to import components from design-system that uses nested components (even the same components that we shown above), I'm getting the following error:

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

For simplicity, here's the flow:

To reproduce:

1. git clone https://github.com/Newbie012/emotion-monorepo-babel-plugin-bug
2. open project
3. run pnpm reproduce (this will install the dependencies and start a dev server in my-app)
4. open http://localhost:3000/ and see console error

Expected behavior:

Package "A" which imports a component from package "B" which creates the component (with component selector) using emotion from package "C" should be able to successfully render the component.

In other words, my-app should be able to import Wrapper and Child and render them.

Environment information:

• react version: 18.1.0
• @emotion/react version: 11.9.0
• @emotion/styled version: 11.8.1
• @emotion/babel-plugin version: 11.9.2

[srmagura]

(Disclaimer, I don't know how Vite works, but...) The most likely cause of this problem is that Babel is only being run on my-app, not design-system.

I looked at the compiled files for your application using the Sources tab of the browser dev tools and saw this.

design-system/src/index.ts does not appear to have been compiled by Babel:

While my-app/src/App.tsx has been compiled by Babel:

So I'm pretty sure this is a Vite configuration problem rather than a bug in Emotion.

One option could be to run Babel on each package except my-app to compile all the TypeScript to plain JavaScript, and then have Vite compile & bundle my-app.

[Newbie012]

@srmagura Thanks for taking your time looking at it.

It looks like you're correct. Apparently there's a stale open PR (vitejs/vite#6202) that should fix this.

For now, I've created a workaround (https://github.com/Newbie012/emotion-monorepo-babel-plugin-bug/pull/1). It's a custom Vite plugin that basically does what you've suggested, but without manually compiling every time.

function babelTransform(matches: RegExp[], options: TransformOptions): PluginOption

+ import { babelTransform } from "...";

export default defineConfig({
  plugins: [
+    babelTransform([/design-system/], { plugins: [emotionPlugin] }),
    react({
      babel: {
        plugins: [emotionPlugin],
      },
    }),
  ],
});

[srmagura]

Great work! 😁

Closing since this is not an issue with Emotion.