Expo SDK55+NativeWind修改Tailwind类时Metro崩溃求助

问题描述 #

使用Expo SDK 55和NativeWind开发新项目，应用可正常运行，但每次修改Tailwind类（如将text-red-500改为text-blue-500）并保存文件时，Metro会直接崩溃。

错误信息 #

TypeError: Cannot read properties of undefined (reading 'addedFiles')

at DependencyGraph._onHasteChange (node_modules/metro/src/node-haste/DependencyGraph.js:99:18)
at FileMap.<anonymous> (node_modules/metro/src/node-haste/DependencyGraph.js:68:14)
at FileMap.emit (node:events:531:35)
at Object.onChange (node_modules/react-native-css-interop/src/metro/index.ts:344:15)
at ChildProcess.<anonymous> (node_modules/nativewind/src/metro/tailwind/v3/index.ts:70:23)

环境信息 #

• Expo SDK: 55.0.13
• Node.js: v22.22.2（已测试Node 20版本）
• 操作系统：Windows
• NativeWind: 4.1.23
• react-native-css-interop: 0.1.22
• tailwindcss: 3.4.17

代码示例 #

export default function Index() {
  return (
    <View>
      <Text className="text-blue-500">
        Hello World
      </Text>
    </View>
  );
}

已尝试方案 #

• 将NativeWind从4.2.x降级到4.1.23
• 移除package.json中的^符号防止依赖自动升级
• 删除node_modules和package-lock.json后重新安装依赖
• 清除Metro缓存（执行expo start --clear）
• 将项目从D:盘迁移到C:盘
• 测试Node 20和Node 22版本
• 运行expo-doctor未检测到问题
• 验证NativeWind的babel.config.js和metro.config.js配置正确性

用户疑问 #

1. 这是否是NativeWind+Expo+Windows文件监听的已知问题？
2. 是否有稳定的解决方法或推荐配置来避免此Metro崩溃？

解决方案 #

这是NativeWind v4配合Expo SDK 55在Windows平台的已知兼容性问题，核心原因是react-native-css-interop的文件监听事件传递与Metro的依赖图处理逻辑冲突，以下是稳定的解决方法：

1. 降级react-native-css-interop版本 #

将react-native-css-interop锁定到0.1.21版本（0.1.22版本引入了导致addedFiles未定义的bug）：

• 修改package.json中的依赖项："react-native-css-interop": "0.1.21"
• 删除node_modules和package-lock.json
• 执行npm install重新安装依赖

2. 调整Metro配置禁用FS事件监听 #

在metro.config.js中强制使用轮询模式监听文件变化，避免Windows下的文件系统事件异常：

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

// 添加NativeWind的目录到监听列表
config.watchFolders = [...config.watchFolders, './node_modules/nativewind'];
// 支持cjs格式文件
config.resolver.sourceExts.push('cjs');
// 禁用FS事件，改用轮询
config.fileWatcherOptions = {
  poll: true,
  useFsEvents: false,
};

module.exports = config;

3. 开启NativeWind预编译模式 #

在tailwind.config.js中启用预编译，提前生成Tailwind样式，减少热重载时的实时处理压力：

module.exports = {
  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
  presets: [require("nativewind/preset")],
  experimental: {
    precompile: true,
  },
};

4. 临时应急方案 #

如果以上方法暂未生效，修改Tailwind类后手动执行expo start --clear重启Metro，可临时避免崩溃问题。

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