I'm seeing something very strange and I don't know why its happening.
If you have a .babelrc file defined as so:
{
"env": {
"development": {
"presets": ["next/babel"]
},
"production": {
"presets": ["next/babel"]
}
},
"plugins": [
["styled-components", { "ssr": true, "displayName": true, "preprocess": false } ]
]
}
then when you build the app, the TaggedTemplateExpression part of babel-plugin-styled-components is never called. That results in code that looks like this:
var _templateObject = (0, _taggedTemplateLiteral3.default)(['\n color: red;\n font-size: 50px;\n'], ['\n color: red;\n font-size: 50px;\n']);
var Title = _styledComponents2.default.h1(_templateObject);
rather than the expected:
var Title = _styledComponents2.default.h1.withConfig({
displayName: 'pages__Title',
componentId: 'tr8ekl-0'
})(['color:red;font-size:50px;']);
I replicated it using Next.js example with-styled-components.
Could someone verify that they see the same thing?
- download that example linked above
- change its
.babelrc file to the one above
- do a
npm run build
- look at the
/.next/dist/pages/index.js file to see if the styled component has a withConfig
I'm seeing something very strange and I don't know why its happening.
If you have a
.babelrcfile defined as so:then when you build the app, the
TaggedTemplateExpressionpart ofbabel-plugin-styled-componentsis never called. That results in code that looks like this:rather than the expected:
I replicated it using Next.js example
with-styled-components.Could someone verify that they see the same thing?
.babelrcfile to the one abovenpm run build/.next/dist/pages/index.jsfile to see if the styled component has awithConfig