Cannot use DatePicker as JSX Element

Describe the bug Using DatePicker with TS strict mode throws the following type error:

'DatePicker' cannot be used as a JSX component.
  Its instance type 'ReactDatePicker<never, undefined>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'import("/Users/ronny.efronny/projects/frontend/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.ts(2786)

To Reproduce

Enable TS strict mode, or at least the rule strictFunctionTypes.
Use DatePicker.

Expected behavior No errors.

Screenshots

OS: Mac OS Monterey (12.6).
TS version 4.9.0
react-datepicker version 4.8.0
@types/react-datepicker version 4.4.2

This is currently preventing me from enabling strict mode on my project, and I would like to refraing from using ts-ignore. What can be done?

Issue Analytics

State:
Created a year ago
Reactions:1
Comments:5

Top GitHub Comments

1reaction

ShooterArkcommented, Nov 23, 2022

Any updates on this issue @RonnyLark ? Were you able to proceed? We are also not able to proceed because of it.

0reactions

DanielHoffmanncommented, Dec 14, 2022

@RonnyLark I am getting the exact same problem after updating from react 17 to react 18. My project setup is kinda hard to replicate, but I am running:

devDependencies “@types/react”: “^18.0.26”, “@types/react-datepicker”: “^4.8.0”, “@types/react-dom”: “^18.0.9”, “typescript”: “4.8.3”,

dependencies “react-datepicker”: “^4.8.0”

I am also using yarn2 v3.2.4 with pnp mode. The root cause seems to be @types/react-datepicker somehow pulling @types/react 17 even though I am using react 18 on my project, @types/react React.ReactNode on v17 is incompatible with React.ReactNode on v18

See my yarn why result:

yarn why @types/react
├─ @types/react-datepicker@npm:4.4.2
│  └─ @types/react@npm:17.0.8 (via npm:*)
│
├─ @types/react-dom@npm:17.0.8
│  └─ @types/react@npm:17.0.8 (via npm:*)
│
├─ @types/react-dom@npm:18.0.9
│  └─ @types/react@npm:17.0.8 (via npm:*)
│
├─ myapp@workspace:apps/myapp
│  └─ @types/react@npm:18.0.26 (via npm:^18.0.26)

I tried messing around with packageExtensions on yarnrc.yml but I couldn’t find a solution there. But adding a “resolutions” field to my package.json to force a specific version of @types/react fixed the issue:

  "resolutions": {
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9"
  },

I am not quite sure how dependencies decide which @types/react to use when there are multiple ones available in the project (in my project @types/react v17 is also a peer dependency of another dependency I use)

Top Results From Across the Web

DatePicker throws error "cannot be used as a JSX ...

Steps to reproduce Build will throw: Type error: 'DatePicker' cannot be used as a JSX component. Its instance type 'Component<PickerProps & { ...

'datepicker' cannot be used as a jsx component.

js 'DatePicker' cannot be used as a JSX component. Its instance type 'ReactDatePicker<never, undefined>' is not a valid JSX element.

React Datepicker( can't get value of input)

Just use this: handleChange = date => { const valueOfInput = date.format(); ///... }; Because this datepicker returns a moment.js object!

Getting started with React DatePicker component

To render the DatePicker component, need to import DatePicker and its dependent component's styles as given below in App.css . Copied to clipboard....

react-datetime

A date and time picker in the same React.js component. It can be used as a datepicker, timepicker or both at the same...