自定义React包leon-theme导入报错：无法解析'./components'

问题背景 #

开发自定义React包leon-theme，执行npm i leon-theme安装后，在已安装styled-components的基础create-react-app新项目的index.js中导入该包，出现如下错误：

ERROR in ./node_modules/leon-theme/dist/index.js 7:21-44
Module not found: Error: Can't resolve './components' in '/Users/leongaban/Projects/test3/node_modules/leon-theme/dist'

编译后的dist/index.js内容：

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
var tslib_1 = require("tslib");
tslib_1.__exportStar(require("./components"), exports);
//# sourceMappingURL=index.js.map

已尝试的操作：

• 将react-scripts降级至"react-scripts": "^4.0.2"，无效
• 已解决process is missing错误（通过安装styled-components），但路径解析问题未解决

包的tsconfig配置：

{
  "compilerOptions": {
    "outDir": "./dist",
    "module": "nodenext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": false,
    "jsx": "react",
    "moduleResolution": "nodenext",
    "rootDirs": ["src"],
    "baseUrl": ".",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "declaration": true
  },
  "include": ["src/**/*"]
}

问题原因及解决步骤 #

1. 确认编译产物完整性 #

错误核心是dist目录中缺少./components对应的文件：

• 检查src目录下是否存在components/index.ts（或入口文件），且tsconfig的include规则已覆盖该文件
• 执行编译命令后，查看dist目录是否生成components文件夹及对应js文件（如components/index.js）
• 若未生成，调整tsconfig的rootDirs或include，确保所有源码文件被纳入编译

2. 调整模块解析配置 #

当前使用的nodenext模块规则可能导致路径解析不兼容：

• 将tsconfig中的module和moduleResolution改为commonjs（适配大多数React生态场景）：

  "module": "commonjs",
  "moduleResolution": "node"
  

• 重新编译包后发布，再在测试项目中重新安装测试

3. 校验package.json入口配置 #

确保包的package.json中main字段指向正确的dist入口：

"main": "dist/index.js",
"types": "dist/index.d.ts" // 可选，添加类型声明入口

4. 本地链路测试 #

发布前用npm link做本地测试，避免npm安装时文件缺失：

• 在leon-theme目录执行：npm link
• 在测试项目目录执行：npm link leon-theme
• 重启测试项目，验证导入是否正常

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