support react 19

[osdiab]

NextJS 15 RC got released, would like to know if this would work properly with React 19

• loosen peer dependency versions to allow react 19
• make sure that things are still working as expected

Thanks!

[romanoducic]

Any news on this?

[gpbl]

Hi @romanoducic ! I haven't tried DayPicker either React 19 - do you have any issue with it?

[gpbl]

No issues running on React 19-rc:

https://stackblitz.com/edit/rdp9-vite-mtuhpp?file=src%2FApp.tsx

[romanoducic]

here is the error I am getting when installing:

$ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react-day-picker
npm ERR!   react-day-picker@"^9.1.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! react-day-picker@"^9.1.3" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@">=16.8.0" from [email protected]
npm ERR!   node_modules/react-day-picker
npm ERR!     react-day-picker@"^9.1.3" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

here is my packege.json:

{
  "name": "rent-a-car",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "mongoose": "^8.4.4",
    "next": "15.0.0-rc.0",
    "react": "^19.0.0-rc-f994737d14-20240522",
    "react-day-picker": "^9.0.8",
    "react-dom": "19.0.0-rc-f994737d14-20240522",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "15.0.0-rc.0",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

Thanlk you!

[gpbl]

Hi @romanoducic

• it looks like there are more versions from react-day-picker installed:

   Found: [email protected]
   npm ERR! node_modules/react-day-picker
   npm ERR!   react-day-picker@"^9.1.3" from the root project
   npm ERR! Conflicting peer dependency: [email protected]
   npm ERR! node_modules/react
   npm ERR!   peer react@">=16.8.0" from [email protected]
  

• please make sure you follow https://react.dev/blog/2024/04/25/react-19-upgrade-guide#installing to install all the update packages (e.g. @types/react)
• See https://codesandbox.io/p/devbox/day-picker-next-js-p4zzzy for a working example

[grzegorzpokorski]

Hi, React v19 is stable now and I have a issue with refs especially when I create a custom compoenents which can be passed as a props to the DayPicker components. I recieve a errors like this:

Type 'LegacyRef<HTMLButtonElement> | undefined' is not assignable to type 'Ref<HTMLButtonElement> | undefined'.
        Type 'string' is not assignable to type 'Ref<HTMLButtonElement> | undefined'.

where HTMLButtonElement is replaced by HTMLTableDataCellElement, HTMLDivElement, etc.

How can I overcome that issue, without downgrading a React package?

I use the newest version of the react-day-picker (v9.4.2).

[gpbl]

@grzegorzpokorski thanks for your report!

Please help to replicate your issue by forking this code sandbox, thanks.

https://codesandbox.io/p/sandbox/daypicker-react-19-2s9csc

[grzegorzpokorski]

Oh, I see that you released a new version with React upgraded to the latest version (v19). After upgrading react-day-picker to v9.4.3, the issue with refs has been resolved. Thank you for your prompt action and all your work!

[gpbl]

Oh, I see that you released a new version with React upgraded to the latest version (v19). After upgrading react-day-picker to v9.4.3, the issue with refs has been resolved. Thank you for your prompt action and all your work!

You are welcome! Let's hope the fix doesn't break some old React (I could test it with 18). 🙏