Windows环境下Expo React Native配置Metro监听共享文件夹时出现“Failed to start watch mode”错误

我之前在Windows环境下配置Expo + NativeWind + 跨目录共享代码时，遇到过完全一样的问题。你的错误主要来自两个核心点：Metro监听跨目录时的启动失败，以及react-native-css-interop（NativeWind的依赖库）的文件系统补丁未正确加载导致的getSha1未定义错误。下面是具体的排查和解决步骤：

错误根源分析 #

1. Failed to start watch mode：Windows系统下，Metro监听跨目录时容易受路径权限、系统防护软件限制，或者自定义watchFolders与NativeWind的Metro插件初始化顺序冲突影响，导致监听服务启动失败。
2. Cannot read properties of undefined (reading 'getSha1')：这个错误来自react-native-css-interop，它需要依赖Metro已补丁的fileSystem对象才能正常工作，但自定义watchFolders的配置打乱了Metro的默认初始化流程，导致补丁未生效。

具体解决步骤 #

步骤1：修正Metro配置的路径与初始化顺序 #

NativeWind的withNativeWind插件需要包裹最终的完整配置，同时要确保跨目录相关配置在NativeWind处理前正确生效，还要针对Windows的路径特性做兼容调整。修改你的metro.config.js为如下内容：

/* eslint-env node */
const path = require('path');
const { getDefaultConfig } = require('expo/metro-config');
const { withNativeWind } = require('nativewind/metro');

// 明确获取项目根目录，避免Windows下相对路径的层级混淆
const projectRoot = path.resolve(__dirname, '..');
const appDir = path.resolve(projectRoot, 'mobile');
const sharedDir = path.resolve(projectRoot, 'shared');

const config = getDefaultConfig(appDir);

// 1. 配置监听文件夹，同时包含项目根目录和共享目录，确保Metro能监听所有相关文件
config.watchFolders = [projectRoot, sharedDir];

// 2. 配置别名，让@outputs指向共享目录，方便导入
config.resolver.extraNodeModules = {
  '@outputs': sharedDir,
};

// 3. 手动注入Metro的fileSystem，解决react-native-css-interop的getSha1未定义问题
config.transformer = {
  ...config.transformer,
  fileSystem: require('metro-file-map').FileSystem,
};

// 最后用withNativeWind包裹完整配置，确保NativeWind插件能正确处理所有设置
module.exports = withNativeWind(config, { input: './global.css' });

步骤2：解决Windows下的Metro监听权限问题 #

Windows系统的权限限制或实时防护软件（比如Windows Defender）可能会阻止Metro监听跨目录文件，你可以尝试：

• 以管理员身份启动终端，再运行项目
• 将项目根目录添加到Windows Defender的排除列表中，避免实时防护拦截Metro的监听操作
• 检查shared文件夹的属性，确保没有勾选“只读”选项

步骤3：彻底清除缓存并重启服务 #

缓存冲突是这类配置问题的常见诱因，执行以下命令彻底清理缓存后重启服务：

# 清除Expo和Metro缓存并启动
npx expo start --clear

# 如果还是不行，手动清理依赖缓存后重新安装
rm -rf node_modules package-lock.json
npm install
npx expo start --clear

步骤4：验证跨目录导入 #

修改完成后，你可以在mobile/src/app/_layout.tsx中测试共享文件夹的JSON导入：

// 使用别名导入
import amplifyOutputs from '@outputs/amplify_outputs.json';

// 或者直接用相对路径（如果别名未生效时备用）
// import amplifyOutputs from '../../shared/amplify_outputs.json';

console.log('Amplify配置内容:', amplifyOutputs);

内容来源于stack exchange