如何通过babel-plugin-module-resolver解决TS2307模块解析错误？

问题描述 #

我们正在迁移至TypeScript，但遇到错误：TS2307: Cannot find module 'our-filesystem-platform' or its corresponding type declarations。

背景：我们有部分导入会根据环境切换，使用babel-plugin-module-resolver来解析到正确的模块名称。

现有配置 #

.babelrc.js #

{
  "plugins": [
    ["module-resolver",
      {
        "alias": {
          "our-filesystem-platform": "our-filesystem-rn",
        }
      }
    ]
  ]
}

tsconfig.json #

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "our-filesystem-platform": ["packages/native/our-filesystem-rn"],
    }
  }
}

已尝试将paths配置改为"our-filesystem-platform": ["packages/native/our-filesystem-rn/src/index"]，但依然无效。

需求：无需重构项目或大量使用@ts-ignore修复该错误，TypeScript似乎要求解析后的模块名称与请求名称匹配。

TypeScript解析追踪日志 #

======== Resolving module 'our-filesystem-platform' from '/home/me/Documents/app/packages/shared/revisioning/src/revisioning.ts'. ========
Explicitly specified module resolution kind: 'Node16'.
File '/home/me/Documents/app/packages/shared/revisioning/src/package.json' does not exist according to earlier cached lookups.
File '/home/me/Documents/app/packages/shared/revisioning/package.json' exists according to earlier cached lookups.
Loading module 'our-filesystem-platform' from 'node_modules' folder, target file type 'TypeScript'.
Directory '/home/me/Documents/app/packages/shared/revisioning/src/node_modules' does not exist, skipping all lookups in it.
Directory '/home/me/Documents/app/packages/shared/revisioning/node_modules' does not exist, skipping all lookups in it.
Directory '/home/me/Documents/app/packages/shared/node_modules' does not exist, skipping all lookups in it.
Directory '/home/me/Documents/app/packages/node_modules' does not exist, skipping all lookups in it.
File '/home/me/Documents/app/node_modules/our-filesystem-platform.ts' does not exist.
File '/home/me/Documents/app/node_modules/our-filesystem-platform.tsx' does not exist.
File '/home/me/Documents/app/node_modules/our-filesystem-platform.d.ts' does not exist.
File '/home/me/Documents/app/node_modules/@types/our-filesystem-platform.d.ts' does not exist.
Directory '/home/me/Documents/node_modules' does not exist, skipping all lookups in it.
Directory '/home/me/node_modules' does not exist, skipping all lookups in it.
Directory '/home/node_modules' does not exist, skipping all lookups in it.
Directory '/node_modules' does not exist, skipping all lookups in it.
File '/home/me/Documents/app/packages/shared/revisioning/src/package.json' does not exist according to earlier cached lookups.
File '/home/me/Documents/app/packages/shared/revisioning/package.json' exists according to earlier cached lookups.
Loading module 'our-filesystem-platform' from 'node_modules' folder, target file type 'JavaScript'.
Directory '/home/me/Documents/app/packages/shared/revisioning/src/node_modules' does not exist, skipping all lookups in it.
Directory '/home/me/Documents/app/packages/shared/revisioning/node_modules' does not exist, skipping all lookups in it.
Directory '/home/me/Documents/app/packages/shared/node_modules' does not exist, skipping all lookups in it.
Directory '/home/me/Documents/app/packages/node_modules' does not exist, skipping all lookups in it.
File '/home/me/Documents/app/node_modules/our-filesystem-platform.js' does not exist.
File '/home/me/Documents/app/node_modules/our-filesystem-platform.jsx' does not exist.
Directory '/home/me/Documents/node_modules' does not exist, skipping all lookups in it.
Directory '/home/me/node_modules' does not exist, skipping all lookups in it.
Directory '/home/node_modules' does not exist, skipping all lookups in it.
Directory '/node_modules' does not exist, skipping all lookups in it.
======== Module name 'our-filesystem-platform' was not resolved. ========

解决方案 #

1. 适配Node16解析模式的模块入口配置 #

从日志可见当前使用Node16模块解析模式，该模式对模块入口要求更严格。需检查packages/native/our-filesystem-rn目录下的package.json，完善以下字段：

{
  "main": "./src/index.js",
  "types": "./src/index.d.ts",
  "exports": {
    ".": {
      "types": "./src/index.d.ts",
      "import": "./src/index.js",
      "require": "./src/index.js"
    }
  }
}

同时保持tsconfig.json的paths配置指向包含该package.json的目录，并明确解析模式：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "our-filesystem-platform": ["packages/native/our-filesystem-rn"]
    },
    "moduleResolution": "Node16"
  }
}

2. 添加typesVersions字段识别别名（可选） #

若上述配置无效，可在our-filesystem-rn/package.json中添加typesVersions，让TypeScript直接将别名映射到类型文件：

{
  "typesVersions": {
    "*": {
      "our-filesystem-platform": ["./src/index.d.ts"]
    }
  }
}

3. 清除TypeScript缓存 #

执行命令清除旧缓存，避免解析异常：

npx tsc --clearCache

4. 同步VS Code的TypeScript版本（若使用） #

打开VS Code命令面板（Ctrl+Shift+P），选择"TypeScript: Select TypeScript Version"，切换为"Use Workspace Version"，确保编辑器与项目依赖版本一致。

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