nativewind: V4: Fast Refresh is inconsistent

Any updates on this? It’s a really bad DX

It’s even worse using react-native-windows. Even tho the generated css file in the cache folder is updated correctly always, the change is not reflected 99% of the time. A full metro server restart is required.

Steps to reproduce

npx react-native init myproject
npx react-native-windows-init --overwrite
# install NativeWind v4
npx react-native run-windows

Then try to create a component using bg-red-400 for example, which won’t work, until you re-save global.css, and restart the metro server.

The experience is terrible.

I hope this is fixed soon. I also experience this issue with EAS and on Expo SDK 48 and using nativewind v4

Related to #643 and #653 . It is a bug in Metro cache and will be fixed in a future release of Expo

I have to agree with @josetr. A fix is really necessary.

@marklawlor Here is a templated project I have created that shows the above issue after upgrading to 4.0.14. It occurs both in Expo Go and Custom Development Client.

You can see this by going to app/(auth)/index.tsx and changing the following:

        <Text className={'text-6xl font-bold text-lightTextTheme dark:text-darkTextTheme'}>
          Examples:
        </Text>

to

        <Text className={'text-6xl font-bold bg-red-500'}>
          Examples:
        </Text>

Change is not reflected even though the client shows the app has “Refreshing…”

@marklawlor Just realizing that I didn’t ever link the actual repo that I created as a template: https://github.com/rally2/exporouter-nativewind .

I am specifically on WSL2.

Happy Holidays!

@marklawlor Here is a templated project I have created that shows the above issue after upgrading to 4.0.14. It occurs both in Expo Go and Custom Development Client.

You can see this by going to app/(auth)/index.tsx and changing the following:

        <Text className={'text-6xl font-bold text-lightTextTheme dark:text-darkTextTheme'}>
          Examples:
        </Text>

to

        <Text className={'text-6xl font-bold bg-red-500'}>
          Examples:
        </Text>

Change is not reflected even though the client shows the app has “Refreshing…”

@marklawlor I’ll try upgrading to 4.0.14 first. If I am still having issues I’ll create a public project with the symptoms. I would have done that sooner but I am in a project I can’t share publicly. But I’ll remove the pieces I can’t share and create a reproducible example if I continue to run into issues.

Please try 4.0.26. The dev server was reworked to hook into the existing FastRefresh HTTP server.

@minhnc Thanks. I took a look and noticed your running this on MacOS. I think this is an issue isolated to when leveraging WSL2. I have my Macbook where this issue does not happen but on my PC running WSL2 it does.

@minhnc Sample project linked above in my comment. When I add !bg-red-500 as an override, there is no refresh to reflect the changes. Updated to Expo 50 and Nativewind 4.0.23 not too long ago. Verified with npm list nativewind to ensure it installed the right version.

Version 4.0.23 didn’t fixed it for me either.

@minhnc For me its still not working in version 4.0.23