Expo 49 + TypeScript项目中react-hook-form无法解析问题求助

问题现象 #

• 从SignUpScreen.tsx导入react-hook-form时提示无法解析
• @hookform/error-message和@hookform/resolvers/yup因无法解析react-hook-form报错
• Web端出现500内部服务器错误及MIME类型问题
• Android端卡在启动页
• 已尝试删除node_modules重装、修改metro配置并清理缓存、重新安装相关包，问题未解决

解决方案 #

1. 补全缺失的依赖 #

你的package.json中缺少yup依赖，yupResolver必须依赖yup才能正常工作，执行安装命令：

npm install yup
# 或 yarn add yup

2. 调整Metro配置 #

当前metro.config.ts的sourceExts包含冗余默认扩展名，且错误添加了.d.ts类型文件，会干扰模块解析。修改为：

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

module.exports = (() => {
  const config = getDefaultConfig(__dirname);
  const { transformer, resolver } = config;
  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer")
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext: any) => ext !== "svg"),
    // 仅添加默认不包含的扩展名，移除.d.ts
    sourceExts: [...resolver.sourceExts, "svg", "cjs", "mjs"]
  };
  
  return config;
})();

3. 修复TypeScript模块解析配置 #

确保tsconfig.json的模块解析配置适配ESM模块：

{
  "compilerOptions": {
    "moduleResolution": "NodeNext",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

4. 彻底清理缓存 #

执行以下命令清理所有相关缓存：

# 清理Expo和Metro缓存
npx expo start --clear

# 删除Expo缓存文件夹
rm -rf .expo

# 删除TypeScript编译缓存文件
rm tsconfig.tsbuildinfo

# 清理Metro临时缓存（Mac/Linux）
rm -rf $TMPDIR/metro-*

# Windows用户执行：
# rd /s /q %TMPDIR%\metro-*

5. 适配Web端MIME类型问题 #

创建webpack.config.js文件，添加对ESM模块的支持：

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  // 添加ESM扩展名支持
  config.resolve.extensions.push('.mjs', '.cjs');
  return config;
};

6. 验证依赖版本兼容性 #

如果以上步骤无效，尝试降级@hookform/resolvers到v2版本（适配Expo 49的CommonJS模块处理）：

npm install @hookform/resolvers@2.9.11
# 或 yarn add @hookform/resolvers@2.9.11

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