swc-project
Error when using Emotion Component Selector feature
Describe the bug
We're currently attempting to switch from Babel to SWC. We also use Emotion to style our components in our React project. One of Emotion's feature's we heavily use is Component Selectors. This seems to cause a runtime error with SWC.
To use this feature with babel, it requires a plugin so this may require porting it over. However I'm fairly new to this so it's possible this may have already been handled and there could just be some configuration I'm missing. This is a blocker from having our organization switch over from babel to SWC though, so any help is greatly appreciated.
Input code
import React from 'react';
import * as ReactDOM from 'react-dom';
import styled from '@emotion/styled';
const Inner = styled.div`
font-weight: bold;
`;
const Outer = styled.div`
color: blue;
${Inner} {
color: red;
}
`;
const App = () => (
<Outer>
This should be blue.
<Inner>
This should be bold and red.
</Inner>
</Outer>
);
ReactDOM.render(<App />, document.getElementById('root'));
Config
{
"exclude": ["/\/node_modules\//"],
"jsc": {
"parser": {
"syntax": "typescript",
"tsx": true,
"decorators": true
},
"transform": {
"react": {
"pragma": "React.createElement",
"pragmaFrag": "React.Fragment",
"importSource": "@emotion/react"
}
},
"target": "es2015",
"loose": false,
"externalHelpers": false,
"keepClassNames": false
},
"module": {
"type": "commonjs"
}
}
Playground link
No response
Expected behavior
The components should render as expected.
Actual behavior
Getting a runtime error: Uncaught Error: Component selectors can only be used in conjunction with @emotion/babel-plugin.
Version
@swc/cli: "^0.1.55", @swc/core: "^1.2.157", swc-loader: "^0.1.15",
Additional context
No response
Hi @kdy1, thanks for taking a look. I'm sure you guys are very busy already, but I was wondering if there's an ETA for this since this is a blocker for our organization. An ETA would help with our planning and expectations. Thank you.
This is not a bug of swc.
You need AST transform, and it can done via a plugin.
There's code for emotion transform in next.js repo, but I'm not sure when it will be released to npm
@kdy1, thanks for pointing me to the next.js repo. I was wondering is there a reason why this is in next.js and not directly in SWC? Are there any plans to move it into SWC in the future, as my organization does not use next.js?
why this is in next.js and not directly in SWC
It is due to those were external contributions into next.js, as well as it is not directly feasible to be included in @swc/core. If contributor (or core team member) willing to separate it out from next.js and potentially make it as swc core's plugin it'll be available.
Try this :
import styled from '@emotion/styled/macro';
instead of
import styled from '@emotion/styled';
afaik we published emotion plugin. if problem persists with it, may need to provide repro against plugin repo.
This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.
