React Native + TS问题：Haste包存在但指定模块找不到

问题 #

在React Native + TypeScript项目中遭遇模块解析错误，已尝试修改babel.config.js、tsconfig.json，并在对应目录添加name为文件夹名的package.json，但问题仍未解决。

错误信息 #

BUNDLE  ./index.js

error: Error: While resolving module `screens/BulletinScreen2`, the Haste package `screens` was found. However the module `BulletinScreen2` could not be found within the package. Indeed, none of these files exist:

  * `C:\Development_Projects\atlas\src\screens\BulletinScreen2(.native|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
  * `C:\Development_Projects\atlas\src\screens\BulletinScreen2\index(.native|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
    at resolveHasteName (C:\Development_Projects\atlas\node_modules\metro-resolver\src\resolve.js:173:9)
    at Object.resolve (C:\Development_Projects\atlas\node_modules\metro-resolver\src\resolve.js:63:20)
    at ModuleResolver.resolveDependency (C:\Development_Projects\atlas\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:111:31)
    at DependencyGraph.resolveDependency (C:\Development_Projects\atlas\node_modules\metro\src\node-haste\DependencyGraph.js:260:43)
    at Object.resolve (C:\Development_Projects\atlas\node_modules\metro\src\lib\transformHelpers.js:177:21)
    at Graph._resolveDependencies (C:\Development_Projects\atlas\node_modules\metro\src\DeltaBundler\Graph.js:432:35)
    at Graph._processModule (C:\Development_Projects\atlas\node_modules\metro\src\DeltaBundler\Graph.js:218:38)
    at async Graph._addDependency (C:\Development_Projects\atlas\node_modules\metro\src\DeltaBundler\Graph.js:314:20)
    at async Promise.all (index 4)
    at async Graph._processModule (C:\Development_Projects\atlas\node_modules\metro\src\DeltaBundler\Graph.js:263:5)

当前tsconfig.json配置 #

{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["src/*"]
    }
  }
}

解决方案 #

1. 核对文件路径与命名 #

• 确认C:\Development_Projects\atlas\src\screens目录下存在BulletinScreen2.tsx（或对应扩展名的文件），文件名大小写需和导入语句完全匹配（Metro解析时严格区分大小写，即便Windows系统本身不区分）。
• 若采用目录式导出，确保BulletinScreen2目录下有index.tsx（或对应扩展名）文件，且文件内正确导出目标组件。

2. 解决路径解析冲突 #

你添加的Haste包配置（src/screens下的package.json）与tsconfig.json的paths规则存在冲突，导致Metro优先识别Haste包而非TypeScript路径映射：

• 删除src/screens目录下的package.json，取消Haste包配置。
• 在babel.config.js中配置babel-plugin-module-resolver以支持TypeScript路径映射，示例配置：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        extensions: ['.ios.ts', '.android.ts', '.ts', '.ios.tsx', '.android.tsx', '.tsx', '.jsx', '.js', '.json'],
        alias: {
          '*': './src/*'
        }
      }
    ]
  ]
};

3. 清除Metro缓存 #

Metro缓存可能残留旧的解析规则，执行以下命令重置缓存：

npx react-native start --reset-cache

4. 验证导入语句 #

确保导入BulletinScreen2的语句符合配置规则：

• 若存在index.tsx文件，使用：

import BulletinScreen2 from 'screens/BulletinScreen2';

• 若无index.tsx，直接指向具体文件：

import BulletinScreen2 from 'screens/BulletinScreen2.tsx';

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