我正在使用一个新的 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
• 重新安装依赖项（npm install）
• 清除Metro缓存（expo start --clear）
• 将项目从 D: 驱动器移动到 C: 驱动器
• 使用Node 20和 Node 22进行测试
• 运行 expo-doctor（未发现问题）
• 验证 babel.config.js 与 metro.config.js 的NativeWind设置

预期行为

当编辑Tailwind类时，应用应能正常热重载。

实际行为

保存任意Tailwind类更改后，Metro立即崩溃。

问题

这是NativeWind + Expo + Windows文件监视相关的已知问题吗？

是否有稳定的变通方法或推荐的设置来避免这次Metro崩溃？

解决方案

diff --git a/node_modules/react-native-css-interop/dist/metro/index.js b/node_modules/react-native-css-interop/dist/metro/index.js
index c91ba6a..29bb1a8 100644
--- a/node_modules/react-native-css-interop/dist/metro/index.js
+++ b/node_modules/react-native-css-interop/dist/metro/index.js
@@ -176,18 +176,35 @@ async function startCSSProcessor(filePath, platform, isDev, { input, getCSSForPl
                 ? css
                 : getNativeJS((0, css_to_rn_1.cssToReactNativeRuntime)(css, options), debug)));
             debug(`virtualStyles.emit ${platform}`);
+            // Metro >= 0.82 changed the "change" event shape on the
+            // haste/file-map emitter. It now expects
+            // `{ changes: { addedFiles, modifiedFiles, removedFiles }, rootDir }`
+            // instead of the old `{ eventsQueue: [...] }`. Emitting the old
+            // shape crashes DependencyGraph._onHasteChange with
+            //   "Cannot read properties of undefined (reading 'addedFiles')".
+            // See: https://stackoverflow.com/q/79931983
+            //
+            // We must also mark the virtual CSS filePath as modified, so
+            // Metro's DeltaCalculator adds it to the next rebuild. The
+            // absolute path is reconstructed by metro as
+            // `path.join(rootDir, canonicalPath)`; passing rootDir=""
+            // and canonicalPath=filePath (already absolute) yields the
+            // correct absolute path.
             haste.emit("change", {
-                eventsQueue: [
-                    {
-                        filePath,
-                        metadata: {
-                            modifiedTime: Date.now(),
-                            size: 1,
-                            type: "virtual",
-                        },
-                        type: "change",
-                    },
-                ],
+                changes: {
+                    addedFiles: new Map(),
+                    modifiedFiles: new Map([
+                        [
+                            filePath,
+                            {
+                                modifiedTime: Date.now(),
+                                isSymlink: false,
+                            },
+                        ],
+                    ]),
+                    removedFiles: new Map(),
+                },
+                rootDir: "",
             });
         }).then((css) => {
             debug(`virtualStyles.initial ${platform}`);

你可以为 react-native-css-interop 添加补丁，使其在expo 55下工作。我尝试过，效果对我有用。

操作步骤 -

1. npm install --save-dev patch-package
2. 然后在根目录创建一个patch文件夹，并添加一个 react-native-css-interop+0.2.3.patch 的补丁文件，内容如上。
3. 在package.json的 scripts对象中添加这个 "postinstall": "patch-package"。
4. 然后运行 npx patch-package react-native-css-interop

这些步骤应该能帮助你解决问题。