Failed to compile: node:fs/promises - Error when trying to colocate styles in a MDX project

[clovis-rosa]

Hi guys! First, thanks for putting the time to work on this project!

I'm playing around next-yak in a MDX project where the following error occurred while trying to colocate the styles:

"Module build failed: UnhandledSchemeError: Reading from "node:fs/promises" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs."

Here is a repo example: https://github.com/clovis-rosa/nextjs-mdx-blog-next-yak

Please see the Page.tsx, comment the import Article line and uncomment the styled block on the bottom of the page to see the error.

As I still a bit confused with the "use server" directive in Next, I add it to the top. The error goes away, but no styles are applied to that specific HTML element.

[Mad-Kat]

Hey @clovis-rosa

Thank you very much for the detailed issue description and for taking the time to create a reproduction. Upon first glance it looks for me that this is related to #112 where we created a bug for next.js in vercel/next.js#67591.

I had again a look yesterday at the problem but I didn't find a fast solution (yet). I will keep you in the loop.

[jantimon]

node:fs/promises is only imported for a rsc - maybe our transform confuses next.js and it handles it like a client component?

[Mad-Kat]

Yes exactly my thought. If we could say to next.js that our import is not a client component but a valid CSS file it should work

[clovis-rosa]

Just a small update: everything working fine after I add "use server" on top of the file posts-queries.ts. I guess @Mad-Kat may be in the right direction on this one.

[jantimon]

I believe this could be the same bug as explained in this #112 (comment)

1. In the next.js RSC compilation layer, Next.js allows direct use of node:fs/promises for file system operations
2. When next-yak processes the styled components, it seems to trigger a recompilation in the next.js browser compilation layer
3. The browser layer compilation encounters the node:fs/promises import and fails because:
   • Node.js modules can't run in the browser
   • Webpack in the browser layer isn't configured to handle node: scheme URLs