Typescript React模块引用报错：TS2307无法找到moduleA

咱们先理清楚你遇到的问题：在moduleB里尝试引用moduleA的Button组件时，TypeScript抛出了TS2307: Cannot find module的错误。结合你提供的配置文件和错误信息，我整理了几个关键的修复步骤：

1. 检查引用路径是否正确 #

从错误信息Cannot find module './moduleA'来看，你可能在Start.tsx里用了相对路径引用moduleA，但moduleA是通过npm install ../moduleA安装到node_modules里的第三方包，应该直接用包名引用：

// 正确写法
import { Button } from "moduleA";
// 错误写法（别用相对路径）
// import { Button } from "./moduleA";

2. 统一包名的大小写匹配 #

你的moduleA的package.json里name字段是"moduleA"（大写A），但moduleB的dependencies里写的是"modulea": "file:../modulea"（全小写）。虽然Windows文件系统不区分大小写，但TypeScript的模块解析会严格匹配包名，这很可能是找不到模块的原因之一。

修复：
修改moduleB的package.json，把依赖名改成和moduleA完全一致的大小写：

"dependencies": {
  "moduleA": "file:../moduleA",
  // 保留其他原有依赖...
}

改完后重新执行npm install更新依赖。

3. 修正moduleA的TypeScript编译配置 #

你提供的tsconfig.json内容不完整，但从moduleA的build脚本rm ./lib/* && tsc和package.json里的types: "./lib/Button.d.ts"能看出来，你期望编译后的文件输出到lib目录，但当前tsconfig里的outDir是./dist，这会导致编译产物跑到dist文件夹，而moduleB找不到lib下的文件。

修复：
完善moduleA的tsconfig.json，确保以下关键配置正确：

{
  "compilerOptions": {
    "outDir": "./lib", // 输出目录和package.json配置对齐
    "target": "es5",
    "declaration": true, // 必须开启，才能生成.d.ts类型文件
    "jsx": "react", // 支持React的JSX语法
    "module": "commonjs", // 可根据你的webpack需求调整为ESNext
    "strict": true
  },
  "include": ["src/**/*"], // 假设你的组件源码在src目录下
  "exclude": ["node_modules", "lib"]
}

配置完成后，在moduleA里执行npm run build，确认lib目录下生成了对应的.js和.d.ts文件。

4. 给moduleA配置正确的入口导出 #

如果Button.tsx是单独的组件文件，建议在moduleA的src目录下创建一个index.ts作为统一入口，方便外部引用：

// moduleA/src/index.ts
export { Button } from './Button';

然后修改moduleA的package.json，让main和types指向入口文件的编译产物：

{
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  // 保留其他原有配置...
}

这样moduleB里的import { Button } from "moduleA"就能正确识别到导出的组件了。

5. 验证moduleB的基础配置 #

确保moduleB的tsconfig.json开启了node模块解析策略（默认是开启的，但可以明确配置）：

{
  "compilerOptions": {
    "moduleResolution": "node",
    // 保留其他原有配置...
  }
}

另外，检查moduleB的webpack配置，确保ts-loader没有排除node_modules里的moduleA，让它能正常处理这个本地包的代码。

最后验证流程 #

1. 在moduleA中执行npm run build，确认lib目录下生成了index.js、index.d.ts、Button.js、Button.d.ts等文件；
2. 在moduleB中执行npm install，确认node_modules/moduleA目录下有lib文件夹和正确的package.json；
3. 重新编译moduleB，查看错误是否消失。

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