emotion: babel-plugin-emotion not working after upgrading to 10
I upgraded from Emotion 9 to 10, and it seems like the babel plugin is now ignored. I’ve pinpointed the issue to the babel plugin version. If I keep Emotion at 10, and just revert the babel plugin back to 9.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:
{
test: /\.(js|tsx|ts)$/,
exclude: /(node_modules)/,
use: [{
loader: 'babel-loader',
options: { babelrc: true }
},
{
loader: 'ts-loader',
options: {
transpileOnly: process.env.NODE_ENV !== 'production',
getCustomTransformers: () => ({
before: [tsTransformAsyncToMobxFlow()]
})
}
}
]
},
babelrc:
{
"plugins": [
"@babel/plugin-syntax-dynamic-import",
["import", { "libraryName": "antd", "style": true }]
],
"env": {
"langs": {
"plugins": [
"@babel/plugin-transform-modules-commonjs"
]
},
"development": {
"plugins": [
["@babel/plugin-transform-react-display-name"],
["emotion", { "sourceMap": true, "autoLabel": true }]
]
},
"production": {
"comments": false,
"plugins": [
"@babel/plugin-transform-react-constant-elements",
"@babel/plugin-transform-react-inline-elements",
"transform-react-remove-prop-types",
["emotion"]
]
}
}
}
tsconfig:
{
"compilerOptions": {
"pretty": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"outDir": "./typescript-build",
"suppressImplicitAnyIndexErrors": true,
"moduleResolution": "node",
"jsx": "react",
"module": "esnext",
"noImplicitAny": true,
"preserveConstEnums": true,
"removeComments": true,
"target": "esnext",
"sourceMap": true,
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"baseUrl": ".",
"paths": {
"~dpStores/*": ["src/stores/*"],
"~dpTooltip": ["src/shared/components/tooltip.tsx"],
"~dpEmotion": ["src/shared/themes/emotion.tsx"]
}
},
"exclude": [
"node_modules"
],
"plugins": [
{
"name": "tslint-language-service",
"alwaysShowRuleFailuresAsWarnings": false,
"ignoreDefinitionFiles": true
},
{
"name": "typescript-styled-plugin"
},
{ "transform": "ts-transform-async-to-mobx-flow", "type": "config" }
]
}
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 2
- Comments: 16 (9 by maintainers)
@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
afaict,
@babel/plugin-transform-react-inline-elementsis incompatible with emotion 10.I also am not seeing “autoLabel”'s on v10