Styled-jsx rendering with next 13

2.6k views Asked by At

Recently, I have been trying new next 13 app directory using styled-jsx as a styling option. Soon after that I came to a contant warning conserning styles:

Error: This module cannot be imported from a Server Component module. It should only be used from a Client Component

Yet according to styled-jsx docs, it should work on both client and server side. So, what am I missing?

My guess is that next 13 is by default renders on the server side, whereas styled-jsx in its nutshell supports only client; cause as soon as I set "use client" at the start of the file, the problem disappears.

2

There are 2 answers

0
ridiculis On BEST ANSWER

I'm having exactly same problem and would def want this to render on the server rather than using use client.

Putting styled-jsx away until this is somehow sorted.

EDIT: There is a description how to use styled-jsx here: https://beta.nextjs.org/docs/styling/css-in-js

1
cphoover On

Seems like next gave up supporting style-jsx which is a bummer because it's a well made lib. And great for devs that know css like the back of their hand and prefer it to other css-in-js options