在 TypeScript 中将 TailwindCSS (Nativewind) 与 React Native 18 + Expo 49 集成时出错

Question

我正在尝试使用 React Native 18、Expo 49、TailwindCSS (Nativewind) 和 TypeScript 建立一个项目。但是，我在尝试使用 TailwindCSS 编译 TypeScript 代码时遇到了问题。这是我的设置：

这是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>
  );

}

问题：

• 运行命令：

  expo start --web

  （我还没有尝试在Android/iOS上运行它）
• 尝试编译代码时出现以下错误：

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
}

我采取的步骤：

我已经安装了必要的依赖项，包括TailwindCSS、Nativewind和TypeScript，并引用了必要的类型。但是，我不确定如何解决与异步插件相关的此错误。

预期结果：

我希望代码能够成功编译，并且应用程序能够使用 TailwindCSS 类显示 UI 元素。

要求：

有人可以提供有关如何正确地将 TailwindCSS (Nativewind) 与 React Native 18 和 Expo 49 集成的指导吗，特别是在 TypeScript 的上下文中？我非常感谢任何解决此问题的帮助。

提前感谢您的帮助！

存储库链接：React Native Expo with TailwindCSS

Answer 1

已修复！

我所做的步骤：

• 删除

  node_modules

• 将顺风版本锁定为

  3.3.2

• 重新安装

  yarn install

• 也安装了

  npx expo install @expo/webpack-config

  ，因为我正在使用网络
• 运行：

  yarn web

参考： 错误：使用 process(css).then(cb) 来使用异步插件 (RN 0.72.X) #498