[V4] Unable to resolve "react-native-css-interop"

[DaveVaval]

Describe the bug When updating to the latest version, or anything passed >4.0.13, I get this issue. After looking at passed issues it seemed like people were experiencing the same thing with pnpm, but in my case I am using NPM.

To Reproduce Steps to reproduce the behavior:

1. Expo 49.0.93
2. React Navigation 6
3. Tailwindcss 3.3.2
4. Using NPM

Additional context My bable config:

and within my metro config I am requiring withNativeWind : const { withNativeWind } = require('nativewind/metro');

and returning my config like so: return withNativeWind(config, { input: './global.css' });

[bradleybernard]

Also getting the same with, with same looking babel config, but with Expo SDK 51 beta. Only seemed to hit me when I upgraded to SDK 51 beta... hm

iOS Bundling failed 3382ms node_modules/expo-router/entry.js (469 modules)
Unable to resolve "react-native-css-interop/jsx-runtime" from "node_modules/expo-router/build/qualified-entry.js"

[DaveVaval]

@bradleybernard in your case did it work using expo 50?

[bradleybernard]

Yep only with 51, I went back down to 50 and it works for some reason. No configs changed, just version changes in package file and lock file

[alxlion]

Forcing to 4.0.1 solved the issue

[DaveVaval]

Forcing to 4.0.1 solved the issue

Yeah the problem is I can't use the latest version, alot of classes don't work in 4.0.1. It's a bummer but I'll have to put nativewind in standby and stick with stylesheets until a stable release

[gustavo-bonfim]

I'm using Expo 51 and nativewind@canary (4.0.36) and it's working. The canary release fixed several issues since 4.0.1. See if it works for you.

[younes200]

When using pnpm, try adding a .npmrc file to address this issue.

node-linker=hoisted
enable-pre-post-scripts=true

[danstepanov]

@DaveVaval Is this still an issue for you?

[r0bdiabl0]

I'm not sure if this is related but I just upgraded to Expo SDK 51 (51.0.9) and I'm getting this error after running pnpm run dev:ios. I wasn't getting this error prior to upgrading and updating the project:

tailwindcss(ios) rebuilding... /Users/adsfadsf/src/swplatform/node_modules/react-native-css-interop/dist/css-to-rn/index.js:24
    (0, lightningcss_1.transform)({
                                 ^

SyntaxError: Unexpected token Delim('*')
    at cssToReactNativeRuntime (/Users/adsfadsf/src/swplatform/node_modules/react-native-css-interop/src/css-to-rn/index.ts:76:15)

....

fileName: 'style.css',
  source: '@cssInterop set darkMode media;\n' +
    '\n' +
    '@cssInterop set nativewind;\n' +
    
....

Package versions:

Nativewind: 4.0.36 Tailwindcss: 3.4.3 React Native: 0.74.1

Downgrading back to SDK 50 works again.

[DaveVaval]

@DaveVaval Is this still an issue for you?

Yes still an issue for me, I put away nativewind for now and built my app with stylesheet, I'll wait for a stable v4 release!

[sanny-io]

I am also getting this error. I get it even when using 4.0.13

My project is a pnpm monorepo. The comment above with the .npmrc lines does not fix the issue.

"expo": "51.0.31",
"nativewind": "4.0.36",
"react": "18.2.0",
"react-native": "0.74.5",
"tailwind-merge": "2.4.0",
"tailwindcss": "3.4.10"

[DaveVaval]

I tested v 4.1.1 with the latest expo version and I haven't had any issues

[sanny-io]

@danstepanov do you know what commit was supposed to resolve this? I am still getting this error with 4.1.4

[billnye2]

@sanny-io I was able to move pass this error by directly running npx expo install react-native-css-interop@next. I believe that without this, react-native-css-interop is actually at node_modules/nativewind/node_modules/react-native-css-interop and somehow it causes this error? Not sure, but installing it directly adds it at node_modules/react-native-css-interop

[mauricior]

@sanny-io I was able to move pass this error by directly running npx expo install react-native-css-interop@next. I believe that without this, react-native-css-interop is actually at node_modules/nativewind/node_modules/react-native-css-interop and somehow it causes this error? Not sure, but installing it directly adds it at node_modules/react-native-css-interop

this worked for me, thanks!

[yorvinlunawisky]

@sanny-io I was able to move pass this error by directly running npx expo install react-native-css-interop@next. I believe that without this, react-native-css-interop is actually at node_modules/nativewind/node_modules/react-native-css-interop and somehow it causes this error? Not sure, but installing it directly adds it at node_modules/react-native-css-interop

Thank you very much!

[sanny-io]

@sanny-io I was able to move pass this error by directly running npx expo install react-native-css-interop@next. I believe that without this, react-native-css-interop is actually at node_modules/nativewind/node_modules/react-native-css-interop and somehow it causes this error? Not sure, but installing it directly adds it at node_modules/react-native-css-interop

@billnye2 this fixed it for me. Good lookin out brother, I appreciate you 👍

[milon27]

with 4.1.16 it build for web. npx expo export -p web but its stuck on mobile build npx eas build --platform android --profile development

with 4.1.17 it build for mobile build npx eas build --platform android --profile development. but its give error on npx expo export -p web

error:

> expo export -p web

Using src/app as the root directory for Expo Router.
Starting Metro Bundler
Web E:\Milon_Project\JS_PROJECTS\client\_m27lab\_mine\password-manager\password-manager-frontend\node_modules\expo-router/entry.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░ 
99.9% (1356/1357)SyntaxError: SyntaxError in node_modules\nativewind\node_modules\react-native-css-interop\.cache\web.css: Unexpected end of input  
SyntaxError: Unexpected end of input
    at transform (E:\Milon_Project\JS_PROJECTS\client\_m27lab\_mine\password-manager\password-manager-frontend\node_modules\@expo\metro-config\build\transform-worker\transform-worker.js:131:24)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

[ospfranco]

I just tried installing native wind 4.1.21 and getting this error on a vanilla RN project. Any workaround or solution?