解决TypeScript Monorepo中React Native自动导入失效问题

前提确认 #

已通过Yarn Workspaces将shared-types包链接到React Native项目，手动导入功能正常，仅自动导入失效。

1. 修正React Native项目的tsconfig.json配置 #

React Native的TypeScript配置需明确指定共享包路径，确保编辑器与TS语言服务能识别：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "shared-types": ["../../packages/shared-types/src"],
      "shared-types/*": ["../../packages/shared-types/src/*"]
    },
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*", "../../packages/shared-types/src/**/*"],
  "extends": "@tsconfig/react-native/tsconfig.json"
}

• paths需精确指向shared-types的源码目录（或编译后的输出目录，依包配置而定）
• include添加共享包源码路径，确保TS语言服务能索引到类型定义

2. 配置Metro打包器识别Monorepo目录 #

Metro默认不监听Monorepo根目录下的packages文件夹，需修改metro.config.js：

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const path = require('path');

const config = {};

// 添加Monorepo目录到监听列表
config.watchFolders = [
  path.resolve(__dirname, '../../packages'),
];

// 配置Metro解析共享包路径
config.resolver = {
  extraNodeModules: new Proxy({}, {
    get: (target, name) => path.join(process.cwd(), `node_modules/${name}`),
  }),
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

此配置让Metro正确识别共享包，同时辅助编辑器语言服务同步感知包的存在。

3. 调整VS Code编辑器设置（若使用VS Code） #

打开项目根目录的.vscode/settings.json，添加以下配置：

{
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "typescript.tsdk": "./node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

• non-relative确保自动导入使用包名而非相对路径
• 使用项目本地TS SDK，避免全局TS版本差异导致的识别问题

4. 检查shared-types包的package.json配置 #

确保共享包入口字段配置正确，让TS能找到类型定义：

{
  "name": "shared-types",
  "main": "src/index.ts",
  "types": "src/index.ts",
  "private": true
}

• 若包为编译后使用，将main和types指向编译后的dist目录（如dist/index.js和dist/index.d.ts）
• private: true确保Yarn Workspaces仅在本地共享该包，不发布到npm

完成以上配置后，重启编辑器与React Native开发服务器，自动导入功能即可正常工作。

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