Cannot use DatePicker as JSX Element

[RonnyLark]

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

1. Enable TS strict mode, or at least the rule strictFunctionTypes.
2. 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?

[ShooterArk]

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

[RonnyLark]

@ShooterArk the issue went away, not really sure how to be honest. But if you're experiencing this then it's still an issue.

[ShooterArk]

@RonnyLark can you please share your package.json ?? Did you updated to react 18 ?

[RonnyLark]

We did update to react 18:

"react": "^18.2.0",

with

"@types/react": "^18.0.17",

[DanielHoffmann]

@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)

[bchurlinov]

Hey everyone, was this resolved by any chance?

[ony3000]

In my case, I manually modified the yarn.lock file by referring to the https://github.com/Hacker0x01/react-datepicker/issues/3708#issuecomment-1232584412, and after running the yarn command once, the type error was gone.

[joeplaa]

I solved it by adding resolutions key to package.json and (re-)running yarn install.

Add this to your package.json:

  "resolutions": {
      "@types/react": "^18.0.0"
  }

[vorsprungRene]

I solved it by adding resolutions key to package.json and (re-)running yarn install.

Add this to your package.json:

  "resolutions": {
      "@types/react": "^18.0.0"
  }

Worked for me as well! Thanks a lot!

[jeanscircuits]

Thankyou so muh.

[davetapley]

To be sure: the "resolutions" is just a workaround, right?

Is there anything I can do to help with a real fix? :)

[martijnrusschen]

cc @yuki0410-dev

[yuki0410-dev]

@davetapley @martijnrusschen I am not familiar with yarn2, but I thought there might be some old dependencies left in yarn.lock. (I assume that the latest version at the time of installation is recorded in yarn.lock, since the specified version of React in @types is usually *.)

https://github.com/Hacker0x01/react-datepicker/issues/3784#issuecomment-1351281771

Why don't you try once to remove packages such as @types/react-react-datepicker that depend on v17 of @types/react and then try yarn add -D @types/react-datepicker@^4.8.0? While checking with yarn why, if there are any @types packages that depend on @types/react v17, we will do the same.

Sorry if this has already been tried.

[joeplaa]

I'm currently on "[email protected]". With "react-datepicker": "^6.2.0" and "@types/react-datepicker": "^6.0.2" the ""resolutions" workaround" isn't needed.