Using next-yak converts server components to client components

[inuwan]

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]

hi @inuwan

thanks for reporting the issue

could you please set up a minimal reproduction example?

[jantimon]

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]

Created a reproduction example here:

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

[jantimon]

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

[jantimon]

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]

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

[jantimon]

@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

[laem]

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

I tried this, it worked at first. But the navigating on the page triggered the error again...

[jantimon]

There is an open bug in next.js but I believe nobody is working on it

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

can you please show us how you are splitting it? maybe we can help you to fix it