Component selectors error (next 13, mui5, swc, emotion: true, babel is gone)
Unanswered
Japanese Bobtail posted this in #help-forum
Japanese BobtailOP
I have just upgraded a Next.js project from v12 to v13 and removed Babel in order to use SWC. The below error is being thrown (local dev) on pages where Emotion Component selectors are in use via MUI v5 styled components. Builds themselves go through but the styling from the Component selectors isn't working.Any ideas? Everything appears to have been set up correctly, according to docs, for the upgrades and move to SWC emotion.
Error: Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform.
swcMinify is set to true and is building with it successfully.Here is the configuration from Next config. Either this or just
emotion: true give the same result. swcMinify: true,
compiler: {
emotion: {
sourceMap: true,
autoLabel: "dev-only",
labelFormat: "[local]",
cssPropOptimization: true,
importMap: {
"@mui/material": {
styled: {
canonicalImport: ["@emotion/styled", "default"],
styledBaseImport: ["@mui/material", "styled"],
},
},
"@mui/material/styles": {
"styled": {
"canonicalImport": ["@emotion/styled", "default"],
"styledBaseImport": ["@mui/material/styles", "styled"]
}
}
},
},
},1 Reply
Giant panda
hi, have you fixed this issue? 😀