React Native 18+Expo49集成Nativewind编译报错求助

问题场景 #

搭建基于React Native 18、Expo 49、Nativewind（TailwindCSS）和TypeScript的项目，执行expo start --web时触发编译错误，无法正常解析Tailwind类名。

报错信息 #

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)
    ...（省略部分调用栈）
web compiled with 1 error

关键配置文件 #

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>
  );
}

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
}

解决方案 #

该错误源于Nativewind v2与Expo 49 web端编译逻辑不兼容，按以下步骤修复：

1. 升级Nativewind版本
   卸载旧版，安装适配Expo 49的Nativewind v3（当前tailwindcss版本符合v3要求）：

   npm uninstall nativewind
   npm install nativewind@latest
   

2. 配置babel.config.js
   确保babel插件正确引入Nativewind，修改配置文件为：

   module.exports = function (api) {
     api.cache(true);
     return {
       presets: ['babel-preset-expo'],
       plugins: ["nativewind/babel"],
     };
   };
   

3. 更新tailwind.config.js
   确保配置文件包含项目文件扫描路径：

   /** @type {import('tailwindcss').Config} */
   module.exports = {
     content: [
       "./App.{js,jsx,ts,tsx}",
       "./src/**/*.{js,jsx,ts,tsx}"
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

4. 完善TypeScript类型支持
   在tsconfig.json的compilerOptions中添加Nativewind类型：

   "types": ["nativewind/types"]
   

   或保留App.tsx顶部的类型引用注释。

5. 清除缓存重启项目

   npx expo start --web --clear
   

验证 #

完成上述操作后，重新启动项目，编译错误将消失，className属性可正常解析Tailwind样式。

内容的提问来源于stack exchange，提问作者user20951184