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} /> ) }
Advertisement
Answer
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.