I want to dynamic import react-datepicker with the following:

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

But it always gives error:

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)

I removed the method chaining as suggested and the error becomes:

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, "onChange" | "date" | "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)

So how can I use dynamic import properly ?

Any help would be greatly appreciated.

Best regards,

SetNug

I want to dynamic import react-datepicker with the following:

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

But it always gives error:

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)

I removed the method chaining as suggested and the error becomes:

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, "onChange" | "date" | "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)

So how can I use dynamic import properly ?

Any help would be greatly appreciated.

Best regards,

SetNug

• reactjs
• next.js
• react-typescript
• react-datepicker

1 Answer 1

Try this

import dynamic from 'next/dynamic';
const DatePicker = dynamic(() => import('react-datepicker'), { ssr: false })
// You don't need to chain import result with "then" because "then"
// returns a Promise, which causes a type compatibility conflict with
// dynamic function's first argument return type