Client Side and Server Side directive confusion
Unanswered
BAKA posted this in #help-forum
BAKAOP
i have my signup folder outside of api folder that means i can use styled-components in page.tsx inside signup folder that is it is a client side component so why is the following error showing related to styled-componens
'client-only' cannot be imported from a Server Component module. It should only be used from a Client Component.
The error was caused by using 'styled-jsx'. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
'client-only' cannot be imported from a Server Component module. It should only be used from a Client Component.
The error was caused by using 'styled-jsx'. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
13 Replies
We would need to see code and the actual error
“The error was caused by using 'styled-jsx'. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default”
Are you saying none of your files are marked with “use client”?
Are you saying none of your files are marked with “use client”?
No i'm saying we need to see your code so we can try and see what is causing the error.
We need to see the route.ts file.
We can't tell you whats wrong with your code without seeing the code.
@adam.birds No i'm saying we need to see your code so we can try and see what is causing the error.
Oh I was talking to the OP my bad, but yes we could use some code.
So far the only thing I can think of is that you forgot to mark a file with “use client” where you’re importing and using the styled-jsx”
@luis_llanes Oh I was talking to the OP my bad, but yes we could use some code.
Ahh my mistake, just assumed you where OP and replying to me ha. I think the mostly issue is he is retying to return JSX in a route file which is .ts and can't do that.
BAKAOP
ok i m sending the code of both the associated file i.e(page.tsx and route.tsx from signup folders)
any other file's code that u may need?
i have used 'use client' directive