nativewind: [ERROR] Use process(css).then(cb) to work with async plugins

This is the error I got after installing and configuring nativewind library with RN 0.72.3

error: App.js: /Users/***/Developer/***/App.js: Use process(css).then(cb) to work with async plugins

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 13
  • Comments: 37 (2 by maintainers)

Commits related to this issue

Most upvoted comments

Update ^3.3.2 to 3.3.2

Install nativewind using the following scripts.

yard add nativewind
yarn add --dev tailwindcss@3.3.2

I am with this error, how resolve?

Change your tailwind version to 3.3.2 in your package.json and run yarn/npm install

Screenshot 2023-07-14 at 5 48 56 PM @AbdulHakkam I changed it to 3.3.2 but still facing this issue.
  1. keep the version to 3.3.2
  2. clean the ios build and delete the Pods folder
  3. delete ios Derived data
  4. delete the node_modules and reinstall
  5. run the pod install
  6. run the app

I am with this error, how resolve?

Change your tailwind version to 3.3.2 in your package.json and run yarn/npm install

Will there be compatibility with 3.3.3 in the future ? whatโ€™s causing this ?

๐Ÿ‘‘ I think you dropped this. Thank you

@reuel88 You need to pin the version, you still have a version range in your package.json

- "tailwindcss": "^3.3.2",
+ "tailwindcss": "3.3.2",

it worked โ€ฆ thanks

@reuel88 You need to pin the version, you still have a version range in your package.json

- "tailwindcss": "^3.3.2",
+ "tailwindcss": "3.3.2",

I believe this is related to a recent change in Tailwind 3.3.3 to use async/wait in the PostCSS plugin.

See PR: https://github.com/tailwindlabs/tailwindcss/pull/11548

Iโ€™ve never looked at the NativeWind code before, but upon an a quick browsing of the code. I have an idea that it might be necessary to match the async/wait approach in the NativeWind PostCSS plugin as it calls the TailwindCSS plugin internally.

See code reference: https://github.com/marklawlor/nativewind/blob/ece93a6db8730c01b1df9f39eb44ee590714fbd7/packages/nativewind/src/postcss/extract-styles.ts#L26

In particular, this appears to be the offending line of code

postcss(plugins).process(cssInput).css;

I would assume the entire call stack needs to be switched to async that calls extraStycles.

I would open a PR to fix this, but opening a code refactoring as my first PR isnโ€™t always welcomed on a project and seems to me that NativeWind was last tested against Tailwind 3.2. So I would need to bump the dependency to 3.3.3 and force everyone to upgrade.

Let me know if this was helpful.

I am with this error, how resolve?

Change your tailwind version to 3.3.2 in your package.json and run yarn/npm install

Update ^3.3.2 to 3.3.2

Thank you; worked ๐Ÿ˜ƒ

Been working on this for almost 24 hours. Thank you!!!

guys can you give me an example repository where it is using expo-router and nativewind. but the catch is it is really working. because I already followed the official guide and downgraded the tailwind to 3.3.2. but it still has this error.

Web Bundling failed 271ms
Unable to resolve "../styles.css" from "app\_layout.tsx"

This is the error I got after installing and configuring nativewind library with RN 0.72.3

error: App.js: /Users/***/Developer/***/App.js: Use process(css).then(cb) to work with async plugins

this error is because of tailwind you need to change tailwind version from 3.3.3 to 3.3.2.All you need to do is remove node_modules folder and package-lock.json file and tailwind from package.json file and then

npm install --dev tailwindcss@3.3.2

Working fine now. Thanks @chamaldesilva ๐Ÿ’ฏ

I am with this error, how resolve?

Change your tailwind version to 3.3.2 in your package.json and run yarn/npm install

thanks men!

same

This is the error I got after installing and configuring nativewind library with RN 0.72.3 error: App.js: /Users/***/Developer/***/App.js: Use process(css).then(cb) to work with async plugins

same following the official guide

Finally, I was able to find the root cause. This is because of the tailwindcss library.