search

jantimon / next-yak

a streamlined CSS-in-JS solution tailor-made for Next.js, seamlessly combining the expressive power of styled-components syntax with efficient build-time extraction and minimal runtime footprint, ensuring optimal performance and easy integration with existing atomic CSS frameworks like Tailwind CSS
https://yak.js.org
112 stars 4 forks source link

Using next-yak converts server components to client components #112

Open inuwan opened 3 months ago

inuwan commented 3 months ago

Using a next-yak styled component with a server component (page.tsx) that defines the Next.js special function generateMetadata. I get the following error:

You are attempting to export "generateMetadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive. Read more: https:// │ nextjs.org/docs/getting-started/react-essentials#the-use-client-directive

If I remove the next-yak styled component, the error is eliminated.

jantimon commented 3 months ago

hi @inuwan

thanks for reporting the issue

could you please set up a minimal reproduction example?

jantimon commented 3 months ago

it looks like there is a bug in next.js and or css-loader but I am still investigating it

the error NextRscErrClientMetadataExport is thrown by some rust code which shouldn't mess with the css at all 🤷‍♂️

https://github.com/vercel/next.js/blob/8f93430080f1c18b3f25a0b9c842063f6dc9c9e8/packages/next-swc/crates/next-custom-transforms/src/transforms/react_server_components.rs#L738-L749

error definition:

https://github.com/vercel/next.js/blob/8f93430080f1c18b3f25a0b9c842063f6dc9c9e8/packages/next-swc/crates/next-custom-transforms/src/transforms/react_server_components.rs#L281-L283

jantimon commented 3 months ago

Created a reproduction example here:

https://github.com/jantimon/reproduction-next-server-component-css-error

jantimon commented 3 months ago

Reported at next.js: https://github.com/vercel/next.js/issues/67591

jantimon commented 3 months ago

As a intermediate solution you could split the code - everything works as long as metadata and yak styled components are not used within the same file

Mad-Kat commented 3 months ago

I think we should create another example with this case in our repo. What do you think @jantimon ?

jantimon commented 2 months ago

@Mad-Kat - yes we should definitely improve our examples (a more realistic one and a very basic one) 👍

Btw I found the reason for this bug.

During processing Next.js identifies import __styleYak from "./page.yak.module.css!=!./page?./page.yak.module.css as a page and therefore creates an entry out of it:

https://github.com/vercel/next.js/issues/67591#issuecomment-2236111457