React+Rollup打包组件库报错：DisplayHint未从node_modules导出如何解决

这个报错的核心原因是Rollup处理CommonJS格式的第三方依赖时，无法自动识别@bestowinc/enroll-sdk-core中DisplayHint的命名导出：TS类型校验通过是因为对应.d.ts声明文件配置正常，但打包阶段读取JS运行时文件时，导出项没有被正确解析。

第一步：验证第三方包实际导出规则 #

先手动查看node_modules/@bestowinc/enroll-sdk-core/build/lib/question-common.js的实际导出写法：

• 如果是module.exports.DisplayHint = xxx格式的标准命名导出，直接走第二步调整Rollup配置
• 如果是所有导出都挂载在default上，比如module.exports.default = { DisplayHint: xxx }，可以先临时修改导入写法验证：import pkg from '@bestowinc/enroll-sdk-core/build/lib/question-common.js'，调用时使用pkg.DisplayHint，看打包是否能正常通过。

第二步：修改CommonJS插件配置 #

在@rollup/plugin-commonjs配置中新增namedExports项，手动指定该模块的命名导出列表，修改后配置如下：

commonjs({
  include: /node_modules/,
  dynamicRequireTargets: [
    './node_modules/@bestowinc/enroll-sdk-core/build/lib/question-common.js',
  ],
  // 新增手动指定命名导出
  namedExports: {
    './node_modules/@bestowinc/enroll-sdk-core/build/lib/question-common.js': ['DisplayHint']
  }
}),

第三步：调整插件执行顺序 #

Rollup插件按从上到下的顺序执行，你当前配置中resolve插件放在commonjs之后会导致CommonJS模块解析异常，调整插件顺序如下：

plugins: [
  external(), // 优先排除peer依赖
  resolve({
    browser: true,
    preferBuiltins: true,
    mainFields: ['browser', 'module', 'main'], // 新增module、main作为回退，优先读取ES模块产物
  }),
  commonjs({ /* 上一步修改后的配置 */ }),
  typescript({
    tsconfig: './tsconfig.build.json',
    verbosity: 3,
    clean: true,
    check: true,
  }),
  // babel、postcss、svg处理等其余插件保持原有顺序即可
]

第四步：校验TS编译配置 #

检查tsconfig.build.json中是否包含以下配置，避免TS提前把ES模块转成CommonJS格式导致Rollup识别异常：

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

兜底方案 #

如果以上配置调整都不生效，可以在代码中通过类型断言绕开运行时导出识别问题：

// 把原来的命名导入改为全量导入
import * as questionCommon from '@bestowinc/enroll-sdk-core/build/lib/question-common.js'
const DisplayHint = (questionCommon as any).DisplayHint as typeof import('@bestowinc/enroll-sdk-core/build/lib/question-common.js').DisplayHint

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