Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styles extraction doesn't work in server components (Workaround Available~! See comments) #1

Open
Dwlad90 opened this issue Jan 25, 2023 · 7 comments

Comments

@Dwlad90
Copy link
Contributor

Dwlad90 commented Jan 25, 2023

Maintainer Edits/Notes:

For those who want to use style9 in Next.js 13's appDir + Server Components, use style9-webpack/next-appdir instead of style9-webpack/next for now.

For those who want to know why style9 might not work with Next.js 13's appDir, check out https://github.com/SukkaW/style9-webpack#motivation and #1 (comment)


The plugin seems to work great with client components in the app dir, but not in server components.

Here is a very basic reproduction:
https://codesandbox.io/p/sandbox/ew8bdq

Can you spot anything wrong with our setup?

From the testing we've done, it would seem like Style9 itself works fine. If a server component uses a class that is also used in a client component (e.g., both use color: green;), the server component has the correct class and is painted green. However, if the server component uses a style that isn't used in any client component, say color: gold;, it will have a class on it that does not exist in the extracted css file.

@SukkaW

This comment was marked as outdated.

@SukkaW
Copy link
Owner

SukkaW commented Jan 27, 2023

@Dwlad90

After discussing with @shuding (Next.js Team Member), he is able to pinpoint where Next.js drop all the loaders:

https://github.com/vercel/next.js/blob/3a9bfe60d228fc2fd8fe65b76d49a0d21df4ecc7/packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts#L425-L429

Here, only path and query are passed down, and all loaders are ignored.

In the meantime, I am creating a workaround for this. I have created a workaround. You can upgrade to [email protected] or newer, and use style9-webpack/next-appdir (instead of style9-webpack/next) in your Next.js config.

@Dwlad90
Copy link
Contributor Author

Dwlad90 commented Jan 29, 2023

@SukkaW
Thank you so much, the new version of plugin works perfectly with both components (Server and Client).

Here is a very basic reproduction with [email protected]:
https://codesandbox.io/p/github/Dwlad90/elegant-cloud-zckzqc/main

@Dwlad90 Dwlad90 closed this as completed Jan 29, 2023
@SukkaW
Copy link
Owner

SukkaW commented Jan 29, 2023

Thank you so much, the new version of the plugin works perfectly with both components (Server and Client).

Thanks for your feedback!

In the meantime, I will keep the issue open. Once Next.js has fixed that part of its internal implementation, I will add a deprecation/removal warning in style9-webpack/next-appdir (to inform users to switch back to style9-webpack/next), and then I will close the issue.

@Dwlad90
Copy link
Contributor Author

Dwlad90 commented Oct 8, 2023

Hey @SukkaW,
CSS extraction on server components stopped working in the NextJS version @(13.5.4).
Could you please check what happened?

Here is a basic reproduction:
https://codesandbox.io/p/github/Dwlad90/elegant-cloud-zckzqc/draft/goofy-dawn

Update:
It works fine with the latest version of style9-webpack (0.5.2), thanks.

@SukkaW
Copy link
Owner

SukkaW commented Oct 8, 2023

Could you please check what happened?

Update:
It works fine with the latest version of style9-webpack (0.5.2), thanks.

Actually, the issue should have happened since Next.js 13.4.19, when Next.js removes the experimental.appDir (appDir is now enabled by default).

Here is the related fix that has landed in [email protected]: 35f4e31

@Dwlad90
Copy link
Contributor Author

Dwlad90 commented Oct 9, 2023

Could you please check what happened?

Update:
It works fine with the latest version of style9-webpack (0.5.2), thanks.

Actually, the issue should have happened since Next.js 13.4.19, when Next.js removes the experimental.appDir (appDir is now enabled by default).

Here is the related change that has landed in [email protected]: 35f4e31

This actually happened after updating Next JS from "13.4.19" to "13.5.4". The previous version didn't have this problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants