No new generate when used with nextjs webpack 5.

[soilSpoon]

No description provided.

[harlan-zw]

Hey @soilSpoon

The latest version v0.4.0 has better react support but may still have this issue, as I'm not exactly sure what you mean.

Would you mind sharing some details on this issue? What does "no new generate" mean?

I don't have much experience with Next.js

[soilSpoon]

@harlan-zw Sorry I couldn't explain it properly.

Only the code written before executing the development mode is reflected, and the code written after that is not reflected.

In development mode (ex. yarn dev), it is not reflected when changing bg-yellow-500 to bg-yellow-600.

Expected before background color: yellow-500
Received before background color: yellow-500
Expected after background color: yellow-600
Received after background color: transparent

Reference

https://github.com/soilSpoon/my-next-app

[harlan-zw]

Thanks @soilSpoon

I've taken a look and I can replicate your issue. It seems that Next uses its own implementation of webpack's HMR (Fast Reload).

I've spent a while trying to solve it but I haven't been able to. I feel like a solution to this could be some sort of hybrid solution with the dom runtime to run after the fast reload, otherwise I'm not really sure what can be done because the loader files aren't being hit on reload.

Will keep it open for if any ideas comes to me

[kikyous]

It seems that is caused by webpack 5 cache.

[kikyous]

sysgears/webpack-virtual-modules#86

[harlan-zw]

Thanks, @kikyous, will take a look.

[harlan-zw]

It seems that is caused by webpack 5 cache.

Well it seems like this was indeed the issue 🤦‍♂️ Just needed to disable the cache for the virtual module, thanks again @kikyous! 👏

@soilSpoon Would you mind testing this is working for you in version 1.2.3 and we can close this issue off?

[soilSpoon]

It seems to be working fine. but when I set it up as per webpack4 example, it doesn't work.

Like https://github.com/soilSpoon/my-next-app/blob/main/next.config.js, you need to give the scan option to work properly.

For reference, nextjs 11 defaults to webpack 5.

[harlan-zw]

@soilSpoon One difference now is that it's recommended you configure windi through the windi config file. So the scan options have been moved there.

I've updated the Next.js install docs here https://windicss.org/integrations/webpack.html#next-js and updated the example.

I've also made a PR to your repo for the fixes that get it working https://github.com/soilSpoon/my-next-app/pull/10

[soilSpoon]

@harlan-zw Oh! looks good. I think this issue is now resolved! Thanks!