React自定义本地包导入报错：Cannot find module 'test-ui'求助

以下是导致该错误的核心原因及对应解决方法：

1. 自定义包未生成TypeScript类型声明文件 #

你的webpack配置仅将TS/TSX文件编译为JS，但没有生成.d.ts类型声明文件。TypeScript无法识别缺少类型声明的第三方包，因此抛出找不到模块的类型错误。

解决方法：

• 在自定义包的tsconfig.json中添加/修改配置：

  {
    "compilerOptions": {
      "declaration": true, // 自动生成.d.ts文件
      "declarationDir": "./dist" // 指定类型文件输出目录
    }
  }
  

• 可单独添加编译类型的npm脚本，确保类型文件随代码一起构建：

  "scripts": {
    "build:types": "tsc --emitDeclarationOnly",
    "build": "webpack && npm run build:types"
  }
  

2. 自定义包package.json未配置类型入口 #

即使生成了.d.ts文件，如果package.json中没有指定types字段，主项目的TypeScript编译器仍无法定位到类型文件。

解决方法：
在自定义包的package.json中添加以下配置：

{
  "main": "dist/index.js", // 指定打包后的JS入口
  "types": "dist/index.d.ts" // 指定类型声明文件入口
}

3. npm打包时未包含dist目录 #

如果自定义包的package.json没有配置files字段，执行npm pack时可能不会将编译后的dist目录包含到tgz包中。主项目安装后，node_modules里的test-ui包缺少实际的JS和类型文件，导致找不到模块。

解决方法：
在自定义包的package.json中添加files字段：

{
  "files": ["dist"] // 指定npm打包时需要包含的目录
}

4. 验证步骤 #

修改完上述配置后，重新执行以下流程：

1. 在自定义包中运行npm run build完成代码和类型编译
2. 执行npm pack生成新的tgz包
3. 在主项目中重新安装该包：npm install ./test-ui-1.0.0.tgz
4. 重启主项目的TypeScript服务或IDE，确保类型文件被正确识别

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