React组件库barrel文件导出后TS报错：JSX元素无构造/调用签名

1. 修正核心导入语法错误 #

你当前的导入方式完全错误：组件库通过 barrel 文件导出的是命名导出，而非默认导出。你现在把整个库的模块对象当成了单个 React 组件，导致类型校验失败。

修改导入语句：

// 错误写法
import FormTextInput from '@name/library';

// 正确写法
import { FormTextInput } from '@name/library';

2. 修复 Rollup 类型打包路径 #

你的 rollup.config.mjs 中存在明显的路径笔误：第二个打包任务的输入路径写为 dist/ems/types/index.d.ts，但通常 ESM 格式的目录名是 esm，且需与 package.json 中的 module 字段对应。修正路径确保类型文件正确生成：

// 修改前
input: "dist/ems/types/index.d.ts",

// 修改后（匹配实际输出目录）
input: "dist/esm/types/index.d.ts",

执行 npm run rollup 完成完整打包，确保 dist 目录下生成 cjs、esm 文件夹及对应的类型文件 index.d.ts。

3. 同步 package.json 配置 #

确保 package.json 中的字段与 Rollup 输出路径一致：

• 若修正了 ESM 目录名，同步修改 module 字段：

"module": "dist/esm/index.js",

• 确认 types 字段指向正确的类型入口："types": "dist/index.d.ts"

4. 本地 Link 环境的 React 版本统一 #

本地链接组件库时，可能出现项目与库中 React 版本不一致或重复引入的问题，导致组件渲染异常。在应用的 package.json 中添加强制统一配置：

// npm 用户
"overrides": {
  "react": "^18.3.1",
  "react-dom": "^18.3.1"
}

// yarn 用户
"resolutions": {
  "react": "^18.3.1",
  "react-dom": "^18.3.1"
}

5. 可选：显式导出组件（排查用） #

若仍有问题，可在库的 src/index.ts 中显式导出组件，简化 barrel 文件的嵌套导出逻辑：

// library/src/index.ts
export { FormTextInput, FormInputLabel } from "./components/FormElements";

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