React项目引入react-datepicker公共组件报错求助

这个错误的核心是组件导入导出完全不匹配，再加上文件路径写错，导致React无法识别有效的组件类型。直接看关键问题点：

1. 导出与导入的组件名称不对应 #

你的公共组件库index.js里，导出的是重命名后的Datepicker：

export { default as Datepicker } from "./DatePicker/DatePicker.jsx";

但在业务项目中，你却试图导入CustomDatePicker：

import { CustomDatePicker } from '[Organization-folder]/oneems-react-components';

名称完全不匹配，React找不到正确的组件，自然抛出“got: object”的错误。

2. 组件文件路径写错 #

实际组件文件是react-components/CustomDatePicker/CustomDatePicker.jsx，但index.js里导入的路径是./DatePicker/DatePicker.jsx——目录名（CustomDatePicker vs DatePicker）和文件名都对不上，等于你导出的根本不是你编写的那个日期选择器组件。

第一步：修正组件库的导出配置 #

把index.js的路径和导出名改对，和实际组件文件匹配：

// index.js
// 方案1：用组件原本的名字导出
export { default as CustomDatePicker } from "./CustomDatePicker/CustomDatePicker.jsx";

// 方案2：继续用Datepicker作为导出名，但路径要正确
// export { default as Datepicker } from "./CustomDatePicker/CustomDatePicker.jsx";

第二步：修正业务项目的导入语句 #

根据组件库的导出名调整：

• 如果用方案1导出CustomDatePicker，那导入语句本身没问题，但要确保组件库的路径配置正确；
• 如果用方案2导出Datepicker，则需要修改导入和组件使用：

  import { Datepicker } from '[Organization-folder]/oneems-react-components';
  
  // 渲染部分同步修改
  return (
      <>
          <h1>Datepicker</h1>
          <Datepicker />
      </>
  );
  

第三步：检查Rollup的外部依赖配置 #

react-datepicker是第三方依赖，在Rollup打包组件库时，需要将它标记为外部依赖，避免重复打包导致冲突。在rollup.config.js中添加：

export default {
  // 其他配置项...
  external: ['react', 'react-dom', 'react-datepicker'],
}

这样业务项目会使用自身安装的react-datepicker版本，不会和组件库打包的版本产生类型冲突。

第四步：确保业务项目安装了依赖 #

最后确认业务项目中已安装react-datepicker：

npm install react-datepicker
# 或使用yarn
yarn add react-datepicker

完成以上步骤后重启开发服务器，组件应该就能正常渲染了。

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