javascriptreactjstypescriptreact-calendarreact-daterange-picker

Typescript Error using react-daterange-picker "No overload matches this call."


When I try to use react-daterange-picker in my React Typescript app, I get the error

No overload matches this call.
  Overload 1 of 2, '(props: RangeProps<DateRangePicker> | SingleProps<DateRangePicker> | Readonly<RangeProps<DateRangePicker>> | Readonly<...>): DateRangePicker', gave the following error.
    Type 'Date[]' is not assignable to type 'Moment | (MomentRange & typeof import("/Users/nyxynyx/test/node_modules/moment/ts3.1-typings/moment.d.ts")) | DateRange | undefined'.
      Type 'Date[]' is missing the following properties from type 'Moment': format, startOf, endOf, add, and 80 more.
  Overload 2 of 2, '(props: Props<DateRangePicker>, context: any): DateRangePicker', gave the following error.
    Type 'Date[]' is not assignable to type 'Moment | (MomentRange & typeof import("/Users/nyxynyx/test/node_modules/moment/ts3.1-typings/moment.d.ts")) | DateRange | undefined'.
      Type 'Date[]' is not assignable to type 'Moment'.  TS2769

    20 |         <DateRangePicker 
    21 |             onChange={onChange}
  > 22 |             value={value}
       |             ^
    23 |         />
    24 |     )
    25 | }

My code is based on the official example in the package repo.

Why is there a Typescript error here, and how can we fix it?

React Typescript code:

import React, { useState } from 'react';
import DateRangePicker from 'react-daterange-picker';

export function Foo(): JSX.Element {

    const [ value, onChange ] = useState([new Date(), new Date()]);

    return (
        <DateRangePicker 
            onChange={onChange}
            value={value}
        />
    )
}

Solution

  • Well the one line you changed from the example was the import.

    import DateRangePicker from 'react-daterange-picker';
    

    This line does not import the module you linked to in your question. That imports react-daterange-picker, but you linked to @wojtekmaj/react-daterange-picker. Those are two completely different modules.

    Instead install @wojtekmaj/react-daterange-picker and it's types package @types/wojtekmaj__react-datetimerange-picker. Then it should work like you expect.