Styled-components break on reload.

[caseyyee]

When building, breaks on reload.

[caseyyee]

Looks like styled-component hot reload issue.

vercel/next.js#4068

[maddoxnelson]

Having this same problem, just posting here to say that I support you.

I was able to fix it by adding a .babelrc file with this setup:

    "presets": ["next/babel"],
    "plugins": [["styled-components", { "ssr": true }]]
}

And I had to install "babel-plugin-styled-components": "^1.10.0",.

(It was basically the solution described at the bottom of this issue: vercel/next.js#4068)

[caseyyee]

@maddoxnelson fantastic, thanks for the pointers. It doesn't effect the deployed site (good), but it's extremely frustrating from a workflow/dev standpoint (sucks). Appreciate it!