CODEWITHSUNDEEP
next.jsstyled-jsx
Daniil Rõbnikov
Daniil Rõbnikov

Reputation: 63

Styled-jsx rendering with next 13

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.

Upvotes: 2

Views: 3786

Answers (2)

cphoover
cphoover

Reputation: 378

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

Upvotes: 0

ridiculis
ridiculis

Reputation: 66

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

Upvotes: 0

Related Questions