Unable to use DayPickerInput from React-Day-Picker with TypeScript

Question

Whenever I try to import DayPickerInput like below:

import DayPickerInput from 'react-day-picker/DayPickerInput';

I get the ts warning: "Could not find a declaration file for module 'react-day-picker/DayPickerInput."

Looking at the module folder, looks like only DayPicker has types defined.

When I try to use the require method instead like below:

var DayPickerInput = require('react-day-picker').DayPickerInput;

My project builds fine but I get a 2 runtime errors in the console when the component needs to be displayed:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

DayPickerInput is unusable for me right now.

We are working on it :) https://github.com/gpbl/react-day-picker/issues/464 — gpbl, Jul 21 '17 at 06:39

score 0 · Answer 1 · answered Oct 05 '17 at 19:34

0

react-day-picker v6.2 added the TypeScript definitions for the input component. Try to upgrade to see if it fixes your problem.

answered Oct 05 '17 at 19:34

gpbl

4,721
5
31
45

I have v6.2.1 and this is still a problem for me. The file for DayPickerInput is in the types folder, but it's not getting picked up by typescript for some reason. – Jonathan Oct 31 '17 at 14:47
Here's a sandbox of the problem I'm getting: https://codesandbox.io/s/98o50qmn8y The error is wrong in the sandbox though. The error I'm getting is "Could not find a declaration file for module 'react-day-picker/DayPickerInput." just like above. I tried looking into making a PR to fix the issue, but I saw someone else already did, which you rejected it in favor of what you have now, which doesn't work. – Jonathan Oct 31 '17 at 20:56

score 0 · Answer 2 · answered Feb 14 '18 at 14:04

In version 7.0.7 I had to add this to globals.d.ts as a workaround:

declare module 'react-day-picker/DayPickerInput' {
  import { DayPickerInput } from 'react-day-picker/types/DayPickerInput';
  export default DayPickerInput;
}

My impression is that the TypeScript definitions are not up to date, and someone (you or me?) needs to update them? :)

score 0 · Answer 3 · answered Jan 10 '21 at 18:00

Solution: If you are facing this issue as well, check if there is a "types" in your import, between react-day-picker and DayPickerInput.

What Visual Code Imported:

  import DayPickerInput from 'react-day-picker/types/DayPickerInput';

The correct import:

  import DayPickerInput from 'react-day-picker/DayPickerInput';

versions in which this issue occurred:

package.json (relevant packages)

  "dependencies": {
    { ... },
    "react-day-picker": "7.4.8",
  },
  "devDependencies": {
    { ... },
    "@types/react-day-picker": "5.3.0",
    "typescript": "4.1.3",
  }

Unable to use DayPickerInput from React-Day-Picker with TypeScript

3 Answers3