如何在Next.js中正确动态导入react-datepicker？

问题背景 #

使用Next.js的next/dynamic工具动态导入react-datepicker组件时，出现TypeScript类型不兼容错误。初始代码如下：

import dynamic from 'next/dynamic';
const DatePicker = dynamic(() => import('react-datepicker').then(mod => mod.default), { ssr: false });

触发的类型错误信息：

Argument of type '() => Promise<typeof DatePicker>' is not assignable to parameter of type 'DynamicOptions<DatePickerProps> | Loader<DatePickerProps>'.
  Type '() => Promise<typeof DatePicker>' is not assignable to type '() => LoaderComponent<DatePickerProps>'.
    Type 'Promise<typeof DatePicker>' is not assignable to type 'LoaderComponent<DatePickerProps>'.
      Type 'typeof DatePicker' is not assignable to type 'ComponentType<DatePickerProps> | ComponentModule<DatePickerProps>'.
        Type 'typeof DatePicker' is not assignable to type 'ComponentClass<DatePickerProps, any>'.
          Types of property 'defaultProps' are incompatible.
            Type '{ allowSameDay: boolean; dateFormat: string; dateFormatCalendar: string; disabled: boolean; disabledKeyboardNavigation: boolean; dropdownMode: "scroll"; preventOpenOnFocus: boolean; monthsShown: number; ... 35 more ...; usePointerEvent: boolean; }' is not assignable to type 'Partial<DatePickerProps> | undefined'.
              Type '{ allowSameDay: boolean; dateFormat: string; dateFormatCalendar: string; disabled: boolean; disabledKeyboardNavigation: boolean; dropdownMode: "scroll"; preventOpenOnFocus: boolean; monthsShown: number; ... 35 more ...; usePointerEvent: boolean; }' is not assignable to type 'Partial<Omit<{ children?: ReactNode; } & Omit<YearDropdownProps, "date" | "onChange" | "year" | "minDate" | "maxDate"> & Omit<MonthDropdownProps, "onChange" | "month"> & ... 9 more ... & Pick<...>, "dropdownMode" | ... 19 more ... | "onTimeChange"> & ... 4 more ... & { ...; }>'.
                Types of property 'customTimeInput' are incompatible.
                  Type 'null' is not assignable to type 'Element | undefined'.ts(2345)

移除链式调用后，错误仍存在，核心问题一致：

Argument of type '() => Promise<typeof import("<Project>/node_modules/react-datepicker/dist/index")>' is not assignable to parameter of type 'DynamicOptions<DatePickerProps> | Loader<DatePickerProps>'.
  Type '() => Promise<typeof import("<Project>/node_modules/react-datepicker/dist/index")>' is not assignable to type '() => LoaderComponent<DatePickerProps>'.
    Type 'Promise<typeof import("<Project>/node_modules/react-datepicker/dist/index")>' is not assignable to type 'LoaderComponent<DatePickerProps>'.
      Type 'typeof import("<Project>/node_modules/react-datepicker/dist/index")' is not assignable to type 'ComponentType<DatePickerProps> | ComponentModule<DatePickerProps>'.
        Type 'typeof import("<Project>/node_modules/react-datepicker/dist/index")' is not assignable to type 'ComponentModule<DatePickerProps>'.
          Types of property 'default' are incompatible.
            Type 'typeof DatePicker' is not assignable to type 'ComponentType<DatePickerProps>'.
              Type 'typeof DatePicker' is not assignable to type 'ComponentClass<DatePickerProps, any>'.
                Types of property 'defaultProps' are incompatible.
                  Type '{ allowSameDay: boolean; dateFormat: string; dateFormatCalendar: string; disabled: boolean; disabledKeyboardNavigation: boolean; dropdownMode: "scroll"; preventOpenOnFocus: boolean; monthsShown: number; ... 35 more ...; usePointerEvent: boolean; }' is not assignable to type 'Partial<DatePickerProps> | undefined'.
                    Type '{ allowSameDay: boolean; dateFormat: string; dateFormatCalendar: string; disabled: boolean; disabledKeyboardNavigation: boolean; dropdownMode: "scroll"; preventOpenOnFocus: boolean; monthsShown: number; ... 35 more ...; usePointerEvent: boolean; }' is not assignable to type 'Partial<Omit<{ children?: ReactNode; } & Omit<YearDropdownProps, "date" | "onChange" | "year" | "minDate" | "maxDate"> & Omit<MonthDropdownProps, "onChange" | "month"> & ... 9 more ... & Pick<...>, "className" | ... 19 more ... | "onTimeChange"> & ... 4 more ... & { ...; }>'.
                      Types of property 'customTimeInput' are incompatible.
                        Type 'null' is not assignable to type 'Element | undefined'.ts(2345)

核心原因 #

错误根源是react-datepicker组件的defaultProps中，customTimeInput的默认值为null，但组件类型定义中该属性要求为Element | undefined，导致TypeScript类型检查失败，进而影响next/dynamic的类型推断。

可行解决方案 #

方案1：类型断言绕过检查 #

显式导入组件的Props类型，通过类型断言将默认导出转换为符合要求的组件类型：

import dynamic from 'next/dynamic';
import type { DatePickerProps } from 'react-datepicker';

const DatePicker = dynamic(
  () => import('react-datepicker').then((mod) => mod.default as React.ComponentType<DatePickerProps>),
  { ssr: false }
);

方案2：封装组件后动态导入 #

创建一个简单的封装组件，隔离原组件的类型冲突，再动态导入这个封装组件：

1. 新建DatePickerWrapper.tsx文件：

import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

export default DatePicker;

2. 在需要使用的页面/组件中动态导入：

import dynamic from 'next/dynamic';

const DatePicker = dynamic(() => import('./DatePickerWrapper'), { ssr: false });

这种方法能彻底规避类型问题，同时保留react-datepicker的所有功能。

方案3：临时修改类型定义（不推荐） #

临时修改react-datepicker的类型定义文件，将customTimeInput的默认值从null改为undefined。但该方法依赖本地修改，依赖包更新后会失效，仅作为临时应急方案。

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