React组件库在Next.js 13 App目录的子入口导入问题

问题原因 #

并非单纯是Vite用ESM、Next.js不用的差异，核心是Next.js 13 App目录的模块解析逻辑（尤其是React Server Components环境下）对package.json的exports配置有更严格的规范要求，你当前的子入口配置格式不符合这个规范。

Vite的模块解析对exports格式兼容性更强，即使类型定义（types）和import/require同级也能正常识别；但Next.js遵循Node.js模块解析标准，要求每个条件导出分支下明确指定类型文件路径。

你的配置问题 #

当前子入口（比如./accordion）的types字段和import/require同级，而非嵌套在对应条件分支内：

"./accordion": {
  "import": "./dist/accordion/index.js",
  "require": "./dist/accordion/index.cjs",
  "types": "./dist/accordion/index.d.ts"
}

这种格式在Next.js的严格解析逻辑下无法被正确识别，导致它直接 fallback 到文件系统路径（即my-ui-lib/dist/accordion）。

解决方案 #

修改所有子入口的exports配置，将types字段嵌套到import和require分支下，和根入口格式保持一致：

修改后的完整exports配置 #

"exports": {
  ".": {
    "import": {
      "default": "./dist/index.js",
      "types": "./dist/index.d.ts"
    },
    "require": {
      "default": "./dist/index.cjs",
      "types": "./dist/index.d.ts"
    }
  },
  "./accordion": {
    "import": {
      "default": "./dist/accordion/index.js",
      "types": "./dist/accordion/index.d.ts"
    },
    "require": {
      "default": "./dist/accordion/index.cjs",
      "types": "./dist/accordion/index.d.ts"
    }
  },
  "./alert": {
    "import": {
      "default": "./dist/alert/index.js",
      "types": "./dist/alert/index.d.ts"
    },
    "require": {
      "default": "./dist/alert/index.cjs",
      "types": "./dist/alert/index.d.ts"
    }
  },
  "./alert-dialog": {
    "import": {
      "default": "./dist/alert-dialog/index.js",
      "types": "./dist/alert-dialog/index.d.ts"
    },
    "require": {
      "default": "./dist/alert-dialog/index.cjs",
      "types": "./dist/alert-dialog/index.d.ts"
    }
  }
}

后续步骤 #

1. 重新打包组件库，确保dist目录下的子入口文件（index.js/index.cjs/index.d.ts）都正确生成；
2. 更新组件库版本并发布，本地测试可使用npm link/yarn link重新关联；
3. 在Next.js项目中重新安装组件库，即可正常使用import { Accordion, AccordionContent } from "my-ui-lib/accordion"这类子入口导入方式。

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