React-day-picker: Typescript import DayPickerInput

[kirjai]

Thanks for providing good typescript types for this library ❤️

However, when trying to import DayPickerInput in a Typescript project, this style of import fails
import DayPickerInput from 'react-day-picker/DayPickerInput' with the following error message:

Try `npm install @types/react-day-picker/DayPickerInput` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-day-picker/DayPickerInput';`

simply importing from react-day-picker doesn't work as well, as DayPicker component is exported as default.

Am i missing something obvious here, or there's no way of importing DayPickerInput in a typescript project?

[gpbl]

I have no idea! The typescript stuff is from contributors: maybe you could take a look at the source to see how to fix this?

[reinartg]

I am using this component in a typescript project. Have you tried importing it the typescript way:
import * as DayPickerInput from 'react-day-picker/DayPickerInput';

[kirjai]

@reinartg yeah, i get an error saying that react-day-picker/DayPickerInput has no declaration.

Could not find a declaration file for module 'react-day-picker/DayPickerInput'.

Does that approach work for you?

[96467840]

i had same problem. i solved it

1. import DayPickerInput from 'react-day-picker/DayPickerInput';
   and we see compilation error

[at-loader] Checking finished with 1 errors
[at-loader] ./ClientApp/components/fields/InputText.tsx:12:28
TS7016: Could not find a declaration file for module 'react-day-picker/DayPickerInput'. 'D:/work/my/github/webclient/node_modules/react-day-picker/DayPickerInput.js' implicitly has an 'any' type.
Try npm install @types/react-day-picker/DayPickerInput if it exists or add a new declaration (.d.ts) file containing declare module 'react-day-picker/DayPickerInput';

1. make 1.d.ts file in project and put into
   declare module 'react-day-picker/DayPickerInput';

enjoy

[96467840]

d.ts file

declare module 'react-day-picker/DayPickerInput' {
import * as React from 'react';
import { ClassNames } from 'node_modules/react-day-picker/types/common';
import { DayPickerInputProps } from 'node_modules/react-day-picker/types/props';
import DayPicker from 'node_modules/react-day-picker/types/DayPicker';

class DayPickerInput extends React.Component<DayPickerInputProps, any> {
    showDayPicker(): void;
    hideDayPicker(): void;
    getDayPicker(): DayPicker;
    getInput(): any;
}
export default DayPickerInput;

}

[kirjai]

@96467840 You're absolutely right, the solution you provided fixes it. For anyone facing this issue, you can do that.

However, going forward, this solution needs to be added to the types in this repo. I'm happy to open a PR for that some time soon

[gpbl]

@kirjai please do thanks 🙏🏽

[reinartg]

In my project I have it working with the ES6 import syntax, but I have the flag allowSyntheticDefaultImports set to true in tsconfig.json. But based on the solution provided above this is not related to the issue.

[jurosh]

This worked for me:

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

with import like:

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

[axelio]

For me worked:

1. Create day-picker-input.d.ts and put inside of file

declare module 'react-day-picker/DayPickerInput';

1. In file where you want to use component:

/// <reference path="path-to-typings/day-picker-input.d.ts" />
import * as DayPickerInput from 'react-day-picker/DayPickerInput';

...
render() {
  return() {
     <DayPickerInput />
  }
}

[i8wu]

@jurosh where did you put that code? I tried putting it in index.d.ts and it doesn't work. I also tried making a new d.ts file as well.

[jurosh]

@i8wu I have it just thrown in codebase so it gets compiled (in DayPicker.d.ts) but it probably doesn't matter.. ps. I am using version [email protected] and [email protected]

[alexisthual]

Hi there,
This is still an ongoing issue for me. I read other tickers about typing DayPickerInput and tried a lot of the workarounds proposed, none of which worked for me. The error I get is the classic Could not find a declaration file for module 'react-day-picker/DayPickerInput'.
Anything I can do?

[ivangrga]

Problem is that in DayPickerInput class is exported as default, while in ts.d file as normal export.
So it creates mismatch between js module and type file.

[nazartokar]

@axelio, this solution worked, thank u.

[Ne0nx3r0]

For the time being I've just fallen back to:

// tslint:disable:no-var-requires
const DayPickerInput = require("react-day-picker/DayPickerInput").default;
const formats = require("react-day-picker/moment");

It's not typed, but at least you can type your interface for it.