typescriptreact-nativeexpobabel-loadernativewind

Error while integrating TailwindCSS (Nativewind) with React Native 18 + Expo 49 in TypeScript

I'm trying to set up a project using React Native 18, Expo 49, TailwindCSS (Nativewind), and TypeScript. However, I'm encountering an issue while attempting to compile my TypeScript code with TailwindCSS. Here's the setup I have:

This is the code inside the App.tsx:

/// <reference types="nativewind/types" />
import { StatusBar } from 'expo-status-bar';
import { Text, View } from 'react-native';

export default function App() {
  
  return (
    <View className="flex-1 items-center justify-center bg-white">
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );

}

Issue:

ERROR in ./App.tsx
Module build failed (from C:\Users\Mashwishi\AppData\Roaming\npm\node_modules\expo-cli\node_modules\babel-loader\lib\index.js):
Error: M:\Work\React-Native-Expo-with-TailwindCSS\App.tsx: Use process(css).then(cb) to work with async plugins
    at LazyResult.getAsyncError (M:\Work\React-Native-Expo-with-TailwindCSS\node_modules\postcss\lib\lazy-result.js:182:11)
    at LazyResult.sync (M:\Work\React-Native-Expo-with-TailwindCSS\node_modules\postcss\lib\lazy-result.js:401:20)
    at LazyResult.stringify (M:\Work\React-Native-Expo-with-TailwindCSS\node_modules\postcss\lib\lazy-result.js:369:10)
    at LazyResult.get css [as css] (M:\Work\React-Native-Expo-with-TailwindCSS\node_modules\postcss\lib\lazy-result.js:174:17)
    at extractStyles (M:\Work\React-Native-Expo-with-TailwindCSS\node_modules\nativewind\dist\postcss\extract-styles.js:32:54)
    at PluginPass.enter (M:\Work\React-Native-Expo-with-TailwindCSS\node_modules\nativewind\dist\babel\index.js:100:67)
    at newFn (C:\Users\Mashwishi\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@babel\traverse\src\visitors.ts:292:14)
    at NodePath._call (C:\Users\Mashwishi\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@babel\traverse\src\path\context.ts:35:20)
    at NodePath.call (C:\Users\Mashwishi\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@babel\traverse\src\path\context.ts:20:17)
    at NodePath.visit (C:\Users\Mashwishi\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@babel\traverse\src\path\context.ts:94:31)
    at TraversalContext.visitQueue (C:\Users\Mashwishi\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@babel\traverse\src\context.ts:144:16)
    at TraversalContext.visitSingle (C:\Users\Mashwishi\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@babel\traverse\src\context.ts:108:19)
    at TraversalContext.visit (C:\Users\Mashwishi\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@babel\traverse\src\context.ts:176:19)
    at traverseNode (C:\Users\Mashwishi\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@babel\traverse\src\traverse-node.ts:40:17)
    at traverse (C:\Users\Mashwishi\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@babel\traverse\src\index.ts:82:15)
    at transformFile (C:\Users\Mashwishi\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@babel\core\src\transformation\index.ts:124:15)
    at transformFile.next (<anonymous>)
    at run (C:\Users\Mashwishi\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@babel\core\src\transformation\index.ts:48:12)
    at run.next (<anonymous>)
    at transform (C:\Users\Mashwishi\AppData\Roaming\npm\node_modules\expo-cli\node_modules\@babel\core\src\transform.ts:29:20)
    at transform.next (<anonymous>)
    at step (C:\Users\Mashwishi\AppData\Roaming\npm\node_modules\expo-cli\node_modules\gensync\index.js:261:32)
    at C:\Users\Mashwishi\AppData\Roaming\npm\node_modules\expo-cli\node_modules\gensync\index.js:273:13
    at async.call.result.err.err (C:\Users\Mashwishi\AppData\Roaming\npm\node_modules\expo-cli\node_modules\gensync\index.js:223:11)

web compiled with 1 error

package.json:

{
  "name": "react-native-ts-app",
  "version": "49.0.3",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "^49.0.3",
    "expo-constants": "~14.4.2",
    "expo-linking": "~5.0.2",
    "expo-router": "2.0.0",
    "expo-splash-screen": "~0.20.4",
    "expo-status-bar": "~1.6.0",
    "nativewind": "^2.0.11",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.3",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-reanimated": "~3.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-web": "~0.19.6"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "@types/react": "~18.0.14",
    "@types/react-native": "^0.72.2",
    "tailwindcss": "^3.3.2",
    "typescript": "^4.6.3"
  },
  "private": true
}

Steps I've Taken:

I have installed the necessary dependencies, including TailwindCSS, Nativewind, and TypeScript, and referenced the necessary types. However, I'm not sure how to resolve this error related to asynchronous plugins.

Expected Outcome:

I expect the code to successfully compile and the app to display the UI elements using TailwindCSS classes.

Request:

Could someone provide guidance on how to properly integrate TailwindCSS (Nativewind) with React Native 18 and Expo 49, especially in the context of TypeScript? I'd greatly appreciate any assistance in resolving this issue.

Thank you in advance for your help!

Repository Link: React Native Expo with TailwindCSS

Solution

  • Fixed!

    Steps I did:

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