自定义npm包中react-datepicker组件导入NextJS13时元素类型无效错误

问题背景 #

开发带主题的私有npm包用于跨项目复用，用react-datepicker封装了自定义DatePicker组件，其他不依赖react-datepicker的组件导入正常，但在Next.js 13项目中使用该DatePicker时出现错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `DatePicker`.

核心原因 #

这个错误本质是导入的DatePicker最终解析为对象而非有效的React组件函数/类，结合场景主要是依赖打包冲突、组件客户端标记缺失导致的。

解决步骤 #

1. 调整react-datepicker的依赖配置 #

把react-datepicker从包的dependencies移到peerDependencies，避免被打包进产物导致和Next.js项目的依赖冲突：
修改包的package.json：

{
  // ...其他原有配置
  "peerDependencies": {
    "@chakra-ui/system": "^2.0.0",
    "@emotion/react": "^11.8.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-datepicker": "^7.3.0" // 新增该行
  },
  "dependencies": {
    // 移除原有dependencies中的react-datepicker
    "@chakra-ui/icons": "^2.1.1",
    "@chakra-ui/react": "^2.8.2",
    "@chakra-ui/system": "^2.0.0",
    "date-fns": "^3.6.0",
    "react-input-mask": "^2.0.4"
  }
}

2. 配置tsup排除外部依赖 #

修改tsup.config.ts，添加external字段，确保peerDependencies中的依赖不会被打包进你的包：

import { defineConfig } from 'tsup';

export default defineConfig({
  entry: ['src/index.ts'],
  format: ['cjs', 'esm'],
  dts: true,
  splitting: false,
  sourcemap: true,
  clean: true,
  target: 'es2019',
  external: ['react', 'react-dom', 'react-datepicker', '@chakra-ui/system', '@emotion/react']
});

3. 给自定义DatePicker添加客户端标记 #

react-datepicker依赖浏览器DOM，必须将自定义组件标记为客户端组件，同时别忘了导入样式：
修改DatePicker.tsx：

'use client';
import { FC } from 'react';
import ReactDatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css'; // 必须导入样式

interface DatePickerProps {}

const DatePicker: FC<DatePickerProps> = () => {
  return <ReactDatePicker />;
};

export default DatePicker;

4. 重新打包发布包 #

执行打包命令：

npm run build

更新包版本号后重新发布私有npm包。

5. 在Next.js项目中补全依赖 #

确保项目安装了react-datepicker：

npm install react-datepicker

重启Next.js项目后测试组件。

额外排查方案 #

如果上述步骤无效，可尝试：

• 在Next.js项目中打印DatePicker，确认是否为函数类型而非对象
• 修改包的tsconfig.json，将moduleResolution改为bundler（Next.js 13推荐配置）：

{
  "compilerOptions": {
    // ...其他配置
    "moduleResolution": "bundler"
  }
}

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