Localising @blueprintjs/datetime2 components in React 18

[alexpartsch]

Environment

• Package version(s): 4.10.2"
• Browser and OS versions: Brave 1.144.50, macOS 12.6.0

Question

I'm trying to localise my DateRangeInput2 control to the german language. Based on the linked documentation to the old datetime package one needs to import LocalUtils from react-day-picker and apply it to the localUtils property together with a language code in locale to the component:

import {LocalUtils} from "react-day-picker";

// [...]

<DateRangeInput2
                localeUtils={LocalUtils}
                locale="de"
                onChange={([start, end]) => {}}
                formatDate={formatDate}
                parseDate={parseDate} />

// [...]

Since I'm in a typescript project, just applying that gives me:

Compiled with problems:X

ERROR in ./src/main.tsx 13:0-46

Module not found: Error: Can't resolve 'react-day-picker' in '.../src'


ERROR in src/main.tsx:22:26

TS2307: Cannot find module 'react-day-picker' or its corresponding type declarations.
  > 22 | import {LocalUtils} from "react-day-picker";

Suppressing it with // @ts-ignore gives me:

Compiled with problems:X

ERROR in ./src/main.tsx 14:0-46

Module not found: Error: Can't resolve 'react-day-picker' in '.../src'

After installing it react-day-picker, it claims there's no class called LocalUtils:

Compiled with problems:X

ERROR in ./src/CourseSelection.tsx 519:21-31

export 'LocalUtils' (imported as 'LocalUtils') was not found in 'react-day-picker'

So I checked with the @blueprintjs/datetime2s package.json and tried to install the required version of react-day-picker: 7.4.9.

Upon installation npm returned me the dependency resolving error:

npm ERR! Could not resolve dependency:
npm ERR! peer react@"~0.13.x || ~0.14.x || ^15.0.0 || ^16.0.0 || ^17.0.0" from [email protected]
npm ERR! node_modules/react-day-picker
npm ERR!   react-day-picker@"7.4.9" from the root project

For info, I'm using react@^18.2.0, therefore it's not compatible with older versions of react-day-picker.

I could not find till which version LocalUtils was available in react-day-picker.

I know it's more off a typescript question than BlueprintJS specific, but could anyone get localisation for datetime2 working in React 18? Thanks!

[adidahiya]

@alexpartsch good question, thanks for reporting this detailed issue.

I'm using react@^18.2.0, therefore it's not compatible with older versions of react-day-picker.

This seems plausible to me, but I haven't tried this. Does react-day-picker v7 not render properly with React 18?

We've been a bit slow to upgrade react and react-day-picker in Blueprint. I will try to prioritize upgrading react-day-picker in the next few weeks so that we can unblock React 18 support.

[alexpartsch]

@adidahiya I guess react-day-picker v7 depends on an older version of react:

npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"~0.13.x || ~0.14.x || ^15.0.0 || ^16.0.0 || ^17.0.0" from [email protected]
npm ERR! node_modules/react-day-picker
npm ERR!   react-day-picker@"7.4.9" from the root project

[orlahowell]

@adidahiya do you have any progress on upgrading react-day-picker?

[alexpartsch]

@adidahiya do you have any progress on upgrading react-day-picker?

Nope, sticking with it.

[ryanhamilton]

I would really like this as:

1. It would get rid of a lot of error noise during my build. Those errors are forcing me to run with flags that can cause other more critical errors to be ignored.
2. React 18 was released in March 2022. If the latest blueprintjs v2 hasn't reached compatibility with React 18 after 9 months, it makes me worried about its' long term viability.

[adidahiya]

@ryanhamilton yep, I hear you, and I'm bumping the priority on this task. Lately I've been busy migrating our large internal codebases to prepare for Blueprint v5, but this is the next most important task in my queue. It's definitely important for us to stay up-to-date in the React ecosystem.

[MarcelBlubber2905]

So is there a duedate for version 5? The wiki says "late 2022" :-)

[adidahiya]

I've started some work on upgrading to react-day-picker v8 in #5935. It's not a simple upgrade for us, and I can't afford to pile in more breaking changes to v5.0. But I'd like to have something working for React 18 users as a "v2" Blueprint API while leaving react-day-picker v7 support intact in the "v1" components. This should be doable with a few more days of work, hopefully by the end of this month.

[larspapen]

@adidahiya Hey, what is the status of this bug?

[zheffie]

When will this be fixed?

[adidahiya]

You can use the new "v3" components in @blueprintjs/datetime2 v2.x for react-day-picker v8 support.

[alexpartsch]

You can use the new "v3" components in @blueprintjs/datetime2 v2.x for react-day-picker v8 support.

@adidahiya Awesome! I guess I still have to install it with npm install @blueprintjs/datetime2 --force (the --force) flag though when having react 18+ in your deps. Maybe would be cool if you could mention this here.

[adidahiya]

@alexpartsch oh, that's a bug. The package should allow react 18 as a peer dep. I removed the || 18 when we were on react-day-picker v7, but now I can add it back. Will do that momentarily.