Error: Use process(css).then(cb) to work with async plugins (RN 0.72.X)

[Cnordbo]

Describe the bug
Nativewind/babel - Complaining about async plugin after updating to version 0.72.X

Exact error:

Use process(css).then(cb) to work with async plugins

To Reproduce
Steps to reproduce the behavior:

1. Setup a new react-native project using the CLI v0.72.X (npx react-native init nativewindTest)
2. Set up nativewind according to the docs
3. See error

Expected behavior
Expected the app to load with styling

Screenshots

Additional context
Occured after upgrading from 0.71.X to 0.72.X

Stack traces are inconsistent in how they show up, so i was unable to get a full stack trace during the test project. But the issue seems to be related to how postcss is used.

[dylanmeivis]

@Cnordbo I'm having the same issue at the moment. If you find a fix in the meantime could you please let us know here?

[amireds]

Experiencing same issue here as well...

[marklawlor]

Tailwindcss published a breaking change as a minor version. Please lock your tailwindcss@3.3.2

[dylanmeivis]

Can confirm this fixed it for me, thanks @marklawlor !

[amireds]

Tailwindcss published a breaking change as a minor version. Please lock your tailwindcss@3.3.2.

It worked for me... Thanks @marklawlor

[Cnordbo]

Worked for me as well! Thanks a lot @marklawlor :)

[Daniel-MSoares]

It Worked for me as well! Thanks a lot @marklawlor :)

[JClackett]

Still having the same issue, expo 48, tailwind 3.3.2?

Use process(css).then(cb) to work with async plugins

Failing to build on expo

[akinadebowale]

Issue persists on RN CLI @marklawlor. Tried yarn add --dev tailwindcss@3.3.2.

[marklawlor]

If your still having this issue, then you should manually check inside your node_modules at the package.json version of tailwindcss and use commands like npm list tailwindcss to ensure you don't have multiple versions installed.

If you still have the issue after manual verification then provide a link to your repo.

[akinadebowale]

Thanks @marklawlor. After doing some digging and testing, seems the issue on end was cache related. Did some deep cleaning, re-installed everything, and now it working correctly.

[JClackett]

Ahhh finally solved, had to remove the ^ from the tailwind package json version

[israelsaraiva]

I'm using Expo + expo-router + Nx. It was solved just removing ^

[dexitional]

It worked Great for me. Thanks @marklawlor

[bndkt]

@marklawlor I just upgraded to nativewind@4.0.0-alpha.25 and tailwindcss@3.3.4 (new) and this problem seems to be fixed!

[JClackett]

any idea if this will be fixed for nativewind v2 and newer versions of tailwind, 3.3.5 for example? v2 + 3.3.5 still errors

[marklawlor]

any idea if this will be fixed for nativewind v2 and newer versions of tailwind, 3.3.5 for example? v2 + 3.3.5 still errors

v2 most likely will not be updated as I simply don't have the capacity. If someone backports the work from v4 back to v2 I'll merge it.

[JClackett]

ah, I thought it was a bug in tailwind. is the recommended version v4 now?

[devSahinur]

It worked for me... Thanks @marklawlor

[KleKlai]

Tailwindcss published a breaking change as a minor version. Please lock your tailwindcss@3.3.2

It worked for me Thank you

as of today 3.3.2 is the stable higher version break expo

[XChikuX]

@bndkt Hey! I tried upgrading to nativewind v4 from v2.
After solving most errors. All I get is a white screen..

Any chance you've encountered this?

[iamursky]

Tailwindcss published a breaking change as a minor version. Please lock your tailwindcss@3.3.2

So, any ideas on how to use the latest version of NativeWind with Expo 49 and expo-router?

Edited:
Found this: https://www.nativewind.dev/v4/getting-started/expo-router

[JackNgulale]

solution.

change the pakage.json

old
"tailwindcss": "^3.3.6",

new
"tailwindcss": "3.3.2",

then, run this commande

npm install

it's worked for me

[jorgeacruz]

any idea if this will be fixed for nativewind v2 and newer versions of tailwind, 3.3.5 for example? v2 + 3.3.5 still errors

I have same issue, and just add presets: ['babel-preset-expo'], and worked fine

[wali-developer]

Tailwindcss published a breaking change as a minor version. Please lock your tailwindcss@3.3.2

Thanks, it works for me

[ashutosh887]

Hey Everyone!
Use these version:
Let me know if any further help is needed

npm i -D tailwindcss@3.3.2

yarn add --dev tailwindcss@3.3.2

[JClackett]

Whats the situation going forward, is it gna be possible to upgrade to latest tailwind at some point?

[ashutosh887]

We'll see @JClackett
For the time being I'm using this version only

[tylerkahn]

This should probably be added to the docs. I just ran into this issue with a new project.

[JshGrn]

Why is this closed?

[Felix-Asante]

This should probably be added to the docs. I just ran into this issue with a new project.

have you been able to fix it? I have also run into this issue

[tylerkahn]

This should probably be added to the docs. I just ran into this issue with a new project.

have you been able to fix it? I have also run into this issue

This is the solution, downgrading and locking the version: #498 (comment)

[derek-primumco]

Whats the situation going forward, is it gna be possible to upgrade to latest tailwind at some point?

I think the goal is for us to all move to Nativewind v4, which is not released as the default version but is available to install manually (4.0.23 is latest).

Unfortunately for us, Nativewind eliminated the styled HOC, so any upgrade is going to be a large refactor.

The v4 docs https://www.nativewind.dev/v4/overview/ don't include any upgrade instructions either.

[cernockyd]

I encountered the same issue with expo router. Switching to Nativewind v4 and following the installation docs has worked fine. Consider these points:

• If you don't comply with the SDK version, you might still get the error. Make sure to use the configs for the right SDK versions, they are all prepared in the docs tutorial, in my case, I had to use SDK 50+.
• In my case, it was a new project, so there was no refactoring needed for the switch to Nativewind v4.

[jlsnjnr]

Guys, in my case, what was causing this error was a dependency of "Prettier", specifically this one: "eslint-plugin-tailwindcss": "^3.13.0". Removing this dependency, the code compiles correctly with version 3.3.2 of Tailwind.

[andres-dos-santos]

Hi everyone, I'm having a problem with the Android build.

It was running smoothly but after changing the folder name to (auth)/[user-info] it started giving this error.

Does anyone know what it could be?

I'm going to remove the parentheses to see if it solves it, but in any case it's strange, it could even be something in the content, but I followed the way the documentation says.

content: ['./app/**/*.tsx', './components/**/*.tsx'],

[derek-primumco]

It's probably the same issue as everyone else:

• The local minor version of Tailwind and Nativewind got automatically bumped (say by a ^ version number in package.json).
• But the two latest versions are not compatible.
• You either have to lock the Tailwind CSS to the compatible version or upgrade to the pre-release Nativewind 4 version.
  • https://www.nativewind.dev/v4/overview

[andres-dos-santos]

thanks @derek-primumco, but I removed nativewind completely, before that I had already generated several builds that worked perfectly and that started to give errors out of nowhere, I can't afford to use the library and have to change everything later, the idea is very good but...

the packages were in the right version and the build still gave an error

[derek-primumco]

@andres-dos-santos Welcome to React Native / Expo development... This kind of stuff happens for no reason every few weeks. 😊 I'll try to post back after we tackle the Nativewind 4 update to see if I have any tips to share. 👋

[Pratham-05]

I tried everything still th error presist

[Pratham-05]

{
"name": "agrinest",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"@react-navigation/native": "^6.1.17",
"@react-navigation/native-stack": "^6.9.26",
"expo": "~50.0.14",
"expo-status-bar": "~1.11.1",
"nativewind": "^2.0.11",
"postcss": "8.4.23",
"react": "18.2.0",
"react-native": "0.73.6",
"react-native-safe-area-context": "4.8.2",
"react-native-screens": "~3.29.0"
},
"devDependencies": {
"@babel/core": "7.20.0",
"tailwindcss": "3.3.2"
},
"private": true
}