styled-components: Extend not working in Next.js 4 version

Version

2.1.1

Babel-plugin-styled-components version

1.2.1

Reproduction

const Title = styled.h1`
  color: red;
  font-size: 50px;
`
const AnotherTitle = Title.extend`
  color:blue;
`
export default () => <AnotherTitle>My page</AnotherTitle>

Works perfectly in Next.js 3 version but not in 4

it said

Warning: <{color:blue}
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2VzL2luZGV4LmpzP2VudHJ5Il0sIm5hbWVzIjpbXSwibWFwcGluZ3Mi
OiJBQVFpQyxBQUVhLFdBQ1oiLCJmaWxlIjoicGFnZXMvaW5kZXguanM/ZW50cnkiLCJzb3VyY2VSb290IjoiL1VzZXJzL2Fkc3BlL05leHRKcyIsInNvdXJjZXNDb250ZW50IjpbIlxuaW
1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0J1xuaW1wb3J0IHN0eWxlZCBmcm9tICdzdHlsZWQtY29tcG9uZW50cydcblxuY29uc3QgVGl0bGUgPSBzdHlsZWQuaDFgXG4gIGNvbG9yOiByZWQ7
XG4gIGZvbnQtc2l6ZTogNTBweDtcbmBcbmNvbnN0IEFub3RoZXJUaXRsZSA9IFRpdGxlLmV4dGVuZGBcbiAgY29sb3I6Ymx1ZTtcbmBcbmV4cG9ydCBkZWZhdWx0ICgpID0+IDxBbm90aGVyVGl0bGU+TXkgcGFnZTwvQW5vdGhlclRpdGxlPiJdfQ== */
/*@ sourceURL=pages/index.js?entry */ /> is using uppercase HTML. Always use lowercase HTML tags in React.
{ Invariant Violation: Invalid tag: {color:blue}
/*# sourcemappingurl=data:application/json;base64,eyj2zxjzaw9uijozlcjzb3vyy2vzijpbinbhz2vzl2luzgv4lmpzp2vudhj5il0sim5hbwvzijpbxswibwfwcgluz3mioijbqvfpqyxbquvhlfdbq1oilcjmawxlijoicgfnzxmvaw5kzxguanm/zw50cnkilcjzb3vyy2vsb290ijoil1vzzxjzl2fkc3bll05lehrkcyisinnvdxjjzxndb250zw50ijpbilxuaw1wb3j0ifjlywn0igzyb20gj3jlywn0j1xuaw1wb3j0ihn0ewxlzcbmcm9ticdzdhlszwqty29tcg9uzw50cydcblxuy29uc3qgvgl0bgugpsbzdhlszwquadfgxg4gignvbg9yoibyzwq7xg4gigzvbnqtc2l6ztogntbwedtcbmbcbmnvbnn0iefub3rozxjuaxrszsa9ifrpdgxllmv4dgvuzgbcbiagy29sb3i6ymx1zttcbmbcbmv4cg9ydcbkzwzhdwx0icgpid0+idxbbm90agvyvgl0bgu+txkgcgfnztwvqw5vdghlclrpdgxlpijdfq== */
/*@ sourceurl=pages/index.js?entry */
    at invariant (/Users/adspe/NextJs/node_modules/fbjs/lib/invariant.js:42:15)
    at validateDangerousTag (/Users/adspe/NextJs/node_modules/react-dom/cjs/react-dom-server.node.development.js:2399:34)
    at ReactDOMServerRenderer.renderDOM (/Users/adspe/NextJs/node_modules/react-dom/cjs/react-dom-server.node.development.js:2791:5)
    at ReactDOMServerRenderer.render (/Users/adspe/NextJs/node_modules/react-dom/cjs/react-dom-server.node.development.js:2755:23)
    at ReactDOMServerRenderer.read (/Users/adspe/NextJs/node_modules/react-dom/cjs/react-dom-server.node.development.js:2722:19)
    at renderToString (/Users/adspe/NextJs/node_modules/react-dom/cjs/react-dom-server.node.development.js:2980:25)
    at renderPage (/Users/adspe/NextJs/node_modules/next/dist/server/render.js:168:24)
    at Function.getInitialProps (/Users/adspe/NextJs/node_modules/next/dist/server/document.js:83:25)
    at _callee$ (/Users/adspe/NextJs/node_modules/next/dist/lib/utils.js:36:30)
    at tryCatch (/Users/adspe/NextJs/node_modules/regenerator-runtime/runtime.js:65:40) name: 'Invariant Violation', framesToPop: 1 }

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 31 (21 by maintainers)

Most upvoted comments

@morajabi @mxstbr @arunoda here’s a small reproduction https://github.com/philpl/next-4-repro

Edit: It seems that it’s targeting all our tagged template literals: https://github.com/philpl/next-4-repro/blob/master/lib/index.js#L1-L10

Edit 2: @mxstbr Going forward we should write some test cases for styled-jsx that make sure that it doesn’t conflict with SC. Either in one of our repos (babel-plugin, SC), or in theirs.

Edit 3: there seems to be some kind of unguarded transform here for TaggedTemplateLiterals that could be at fault. I don’t have time to investigate it further though https://github.com/zeit/styled-jsx/blob/5213cee0e3aa5f50f61b4f9dfcdd6deb78c1b972/src/babel-external.js#L139-L153

cc @giuseppeg

kitten on Oct 10, 2017

The same issue here with extend not working (Warning: Prop className did not match.).

next: 4.2.1 babel-plugin-styled-components: 1.3.0 styled-components: 2.3.2

alexdevero on Dec 23, 2017

Since this is definitely not on our side, I’m going to close this out for now. Hoping @giuseppeg has a fix out soon 😊

mxstbr on Oct 10, 2017

Oh, I see - apologies, I was looking at an issue that linked to this one, but it looks like the error message is different 😃

martahj on Dec 1, 2017

@giuseppeg thanks for jumping on this quickly 😄 👍

kitten on Oct 10, 2017

@philpl thanks for putting a testcase together and for investigating a bit. I’ll see if I can figure out if anything is broken in styled-jsx – I added a check to only transpile our tagged template literals https://github.com/zeit/styled-jsx/blob/5213cee0e3aa5f50f61b4f9dfcdd6deb78c1b972/src/babel-external.js#L24 🤔

giuseppeg on Oct 10, 2017

/cc @arunoda what on earth is going on here?

mxstbr on Oct 10, 2017

@giuseppeg looks great! Thanks again for the quick reply 👍

kitten on Oct 10, 2017

@giuseppeg It’s good to mention that normal styled statements are not affected. This works perfectly:

import styled from 'styled-components'

const Title = styled.div`
  color: blue;
`

morajabi on Oct 10, 2017

probably they are both undefined 😅

giuseppeg on Oct 10, 2017

Disable the styled-jsx Babel plugin?

mxstbr on Oct 10, 2017

@morajabi Next sets up the styled-jsx/babel plugin by default, hence it has caused some issues before:

https://github.com/zeit/next.js/blob/master/server/build/babel/preset.js#L29

kitten on Oct 10, 2017