New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
babel-plugin-emotion not working after upgrading to 10 #1131
Comments
I also am not seeing "autoLabel"'s on v10 |
@Tsury if you are using And ts-import-plugin to deal with |
@Brooooooklyn Interesting. Didn't know about it. |
@Tsury I think it doesn't matter, because |
afaict, |
@aaronjensen I'll try to remove it and see if it resolves it. |
@Tsury the problem I had with it may be different than what you're seeing. Our setup is also quite different as we use babel to strip typescript types via |
Could you try changing the order of plugins so that emotion is first in the list? The other plugins may be changing the code that emotion is looking for in order to run. |
@aaronjensen Have you changed anything JSX-related in I'm using |
@karol-majewski what are you seeing w/o the pragma? If it's complaining about the css prop not existing, you could try adding |
Thank you for getting back to me. When I don't write the pragma by hand, it doesn't resolve the On the type level everything is fine. It does not complain about |
It sounds like Could you post your babel config? |
Precisely. @louiscenter has found a workaround which works for me though.
I'm using Parcel, so my understanding is that everything goes through Babel at some point.
Correct, I had imported it so it could extend the My {
"presets": [
[
"@emotion/babel-preset-css-prop",
{
"autoLabel": true,
"labelFormat": "[local]",
"useBuiltIns": false,
"throwIfNamespace": true,
"sourceMap": true
}
]
],
"plugins": [
"transform-inline-environment-variables",
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css"
}
],
"add-react-displayname"
],
"env": {
"development": {
"plugins": [
"transform-react-jsx-source"
]
}
}
} |
Interesting. I wonder if it has to do w/ preset ordering. I'm guessing parcel is changing the babel config in some way. Any way, glad you figured out a workaround. |
@tkh44 I was able to work around this issue by placing the preset last in the order, because babel's preset follow a function composition order (last to first): https://babeljs.io/docs/en/presets#preset-ordering |
If you are using typescript and you have a custom styled like in documentation maybe it could help you #1320 (comment) |
I upgraded from
Emotion 9
to10
, and it seems like thebabel plugin
is now ignored. I've pinpointed the issue to thebabel plugin
version. If I keepEmotion
at10
, and just revert thebabel plugin
back to9.2.11
, I will be able to see class labels in development again.I don't know how to reproduce this, but when testing different git commits I was definitely able to pinpoint it to just upgrading the babel plugin from 9.2.11 to 10.0.5. I even tried using earlier versions of the 10 plugin (10.0.0 - 10.0.4) to no avail.
Is there any way I can debug it better, to provide you with more info?
Relevent code:
webpack:
babelrc:
tsconfig:
The text was updated successfully, but these errors were encountered: