Help: My expo+nativewindV5 project runs well on the web (Chrome), but encounters errors on Android phone + expoGo.

[KerryJavaLin]

★★★★★★★★★
The problem has been temporarily solved.

1、Give up manual configuration.
2、Download an APP template：
react-native-reusables-templates

★★★★★★★★★

I created an Expo project,
and then followed the official documentation to configure Nativewind v5 (https://www.nativewind.dev/v5/getting-started/installation).

My project runs well on the web(Chrome), but it encounters errors when run on Expo Go on Android phones.

Error prompt on the terminal：
ERROR Error: failed to deserialize; expected an object-like struct named Specifier, found ()
at compile (E:\code\expo\nativewindV5\node_modules\react-native-css\dist\commonjs\compiler\compiler.js:98:7)
at Object.transform (E:\code\expo\nativewindV5\node_modules\react-native-css\dist\commonjs\metro\metro-transformer.js:23:45)

---

Please help me！
I've spent the whole day trying to solve it, but I haven't succeeded.

---

run well on the web :

error on Android phone + expoGo:

[RobertOstermann]

I am seeing this same error after upgrading from v4 to v5 following the migration guide.

I am using expo development builds and see this error on both IOS and Android.

Here is the relevant code in my setup. I am still using the old config style, but that works on web and I don't think is the issue here.

/* tailwind.config.js */

import { colors } from "./src/theme/colors";

export const theme = {
  extend: {
    fontFamily: {
      sans: "Inclusive Sans",
    },
    colors: colors,
  },
};

/* global.css */

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";

@import "nativewind/theme";

@config "../tailwind.config.js";

:focus,
:focus-visible {
  outline: none;
}

/* metro.config.js */

const { withNativewind } = require("nativewind/metro");

module.exports = withNativewind(config, {
  input: "./src/global.css",
  inlineRem: 16,
});

[KerryJavaLin]

Thank you for your reply.

You said: ... but that works on web and I don't think is the issue here.
This means that your APP can run well on the WEB, but it still encounters errors on Android phone+ExpoGo.

I want the app to run on （Android phone + ExpoGo） without any errors.
This problem has not been solved yet，now, I can only temporarily debug the APP on the WEB.

[KerryJavaLin]

★★★★★★★★★
The problem has been temporarily solved.

1、Give up manual configuration.
2、Download an APP template：
react-native-reusables-templates

★★★★★★★★★

[RobertOstermann]

I was just saying I am seeing the same issue, but on development builds not expo go. I'm still looking for a solution.

Does that solution still use nativewind v5?

[KerryJavaLin]

No, this solution uses nativewind v4.
In my packaging.json file："nativewind": "^4.2.1"

Leave this problem for later to find a solution.
I just want to learn react-native-reusables.
Thank you again for your reply.

Now I can code happily.
First, learn react-native-reusables.

Welcome to China for sightseeing.
If you come to my city for sightseeing, I will guide you for free.

[danstepanov]

Moving this nativewind/react-native-css as it pertains to v5. I'm progressively going through issues pertaining to both v5 and v4.

[RobertOstermann]

This might have been an issue with me not following the setup docs exactly. I forgot to pin the lightning css version and this issue was resolved once I pinned it.

[danstepanov]

This was resolved by pinning the lightningcss version, as noted in the comments. Closing as resolved.