Failure to upgrade from v22 to v23 due to emotion plugin

[suyli7]

Component Name

components package

Issue description

Hi SDS team,

Our team is trying to upgrade SDS components dependency from v22.5.6 to v23.2.1. One major thing I notice is that the @swc/plugin-emotion version went from v4 to v11, it might be related to the this error, which caused runtime failures in our app:

Uncaught Error: Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform

(This comes from the inputDropdownStyles that is using component selector.)

For context, our app is react running on Astro. SDS was working as of v22.5.6 until upgrade to latest.

I'm wondering what's the suggestion to make this major version upgrade work? Perhaps adding swc support to the publish build?

[masoudmanson]

Hey @suyli7,

Not sure about Astro, but in our NextJs app this config resolves the Emotion issue:

https://github.com/chanzuckerberg/create-sds-app/blob/main/next.config.js

[suyli7]

Hey @masoudmanson

Thank you for the pointers. For more context, we are running React with Vite in Astro. Unfortunately none of the standard emotion plugins didn't work. Our plan for now is upgrading SDS to 22.10.1 (before @swc/plugin-emotion went from v4 to v11)