next.jsstyled-jsx

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.


Solution

  • 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