React组件库导入报错：'Heading'未导出的排查求助

我用Rollup构建了一个React组件库，在Next.js项目中导入时出现报错：Attempted import error: 'Heading' is not exported from，但查看组件库的构建产物，Heading组件确实有导出：

import { ComponentProps, FC } from "react";
export interface HeadingProps extends ComponentProps<'span'> {
    title?: string;
    type?: 'h1' | 'h2';
}
export declare const Heading: FC<HeadingProps>;

可能的原因如下：

• Rollup配置与package.json导出映射不匹配
  组件库package.json里的main、module或exports字段，可能没有正确指向包含Heading导出的构建文件。比如main路径指向的入口文件未导出Heading，或者exports的路径映射规则有误，导致Next.js解析组件库时找不到对应的导出项。

• 类型声明文件与运行时代码不一致
  你看到的是类型声明文件（.d.ts），但实际编译后的JS运行时文件可能并未正确导出Heading组件。比如Rollup构建时只生成了类型文件，却在JS代码中漏掉了Heading的导出，或者导出方式不符合预期（比如用了默认导出而非命名导出）。

• Next.js模块缓存未更新
  Next.js存在模块缓存机制，如果之前组件库未包含Heading时已安装过，缓存可能未同步更新。可以尝试删除.next缓存目录，或者彻底重新安装组件库（删除node_modules和锁文件后重新执行安装命令）。

• 导入方式与组件库导出方式不匹配
  比如组件库中Heading是默认导出（export default Heading），但你在Next.js中用了命名导入（import { Heading } from 'your-lib'）；或者反之，都会触发导出错误。核对组件库的实际导出方式和你的导入代码是否一致。

• Rollup Tree Shaking误删导出
  如果Rollup开启了Tree Shaking功能，可能误判Heading组件未被使用，在构建时将其从输出代码中移除。可以检查Rollup配置的treeshake选项，或者在组件库入口文件中显式导出Heading，确保它被标记为需要保留的导出项。

• ES模块与CommonJS兼容性问题
  若组件库输出的是CommonJS格式，而Next.js在ES模块环境下解析时可能出现导出识别异常。检查组件库package.json的type字段：如果是"type": "module"，确保构建输出为ES模块；如果是CommonJS，可调整Next.js的导入方式，或在Rollup配置中同时输出两种格式的产物。

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