Issue updating to React 18 caused by @blueprintjs/datetime dependency

[McDusty]

Environment

• Package version(s):
  "@blueprintjs/core": "4.11.5",
  "@blueprintjs/datetime": "4.4.5"
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "typescript": "4.8.1-rc",
  "@types/react": "18.0.23",
  "@types/react-dom": "18.0.7",

• Operating System: MacOS M1

• Browser name and version: Chrome Version 106.0.5249.119

Actual behavior

After updating a some what large project from React 16 to React 18 my project fails to build.
The error is in a node module inside of Blueprintjs/datetime
The Error I am seeing...

node_modules/@blueprintjs/datetime/node_modules/react-day-picker/types/Props.d.ts(47,13): error TS2694: Namespace 'React' has no exported member 'SFC'.
node_modules/@blueprintjs/datetime/node_modules/react-day-picker/types/Props.d.ts(72,13): error TS2694: Namespace 'React' has no exported member 'SFC'.
node_modules/@blueprintjs/datetime/node_modules/react-day-picker/types/Props.d.ts(145,13): error TS2694: Namespace 'React' has no exported member 'SFC'.

[adidahiya]

@blueprintjs/datetime is not currently compatible with react 18 because we use react-day-picker v7. I'll update the peer dependencies constraint to reflect this. Until we upgrade to react-day-picker v8, it's not going to compile successfully.

Similar issue here: #5652 (comment)

[McDusty]

Cool thanks for the reply

[will-tonic]

React-day-picker has been updated to React 18 so datetime should be able to go to 18 now.

[adidahiya]

@will-tonic it's nontrivial to upgrade to react-day-picker v8 right now, but that's my next priority after Blueprint v5.0 is released. See my draft PR: #5935

[JaimeFLandbot]

Any plans to upgrade this?

[adidahiya]

@blueprintjs/datetime2 now has react-day-picker v8 support with new "v3" components (DatePicker3, DateInput3, DateRangePicker3, DateRangeInput3), see the PRs linked above for details & screenshots. I'm planning to cut a release this week!

[adidahiya]

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

[pxmal]

A few questions:

I've upgraded to all new date v3 components. Only have datetime2 installed.
In datetime2, datetime appears to be a dependency, which has the react-date-picker v7.4.9 as a dependency.

This (i assume) causes a lot of the following when running npm i:

npm WARN Conflicting peer dependency: [email protected] npm WARN node_modules/react npm WARN peer react@"~0.13.x || ~0.14.x || ^15.0.0 || ^16.0.0 || ^17.0.0" from [email protected] npm WARN node_modules/@blueprintjs/datetime2/node_modules/@blueprintjs/datetime/node_modules/react-day-picker npm WARN react-day-picker@"7.4.9" from @blueprintjs/[email protected] npm WARN node_modules/@blueprintjs/datetime2/node_modules/@blueprintjs/datetime

Am I doing something wrong or should that dependency not be required anymore when using the v3 components?

In the datetime2 installation docs the following is noted:

Additional CSS required
This library relies on some components from other Blueprint packages, so you will need to pull in those packages' CSS files as well (if you are not doing this already):

@import "~@blueprintjs/datetime/lib/css/blueprint-datetime.css";

But I can't install the datetime dependency as it conflicts with react 18.

[adidahiya]

@pxmal you will get the peer dependency warning when installing datetime2 + datetime, but you should not have any issues at runtime. You can ignore the peer dependency warning for now. That warning will go away with Blueprint v6.0.

[fchasin]

@adidahiya as @pxmal noted above,

@import "~@blueprintjs/datetime/lib/css/blueprint-datetime.css";

is still listed as required additional CSS, but trying to install blueprint-datetime with react 18 causes an error,

➜ ui-api git:(feature/fh-825-break-out-flight-dates-into-start-and-end-dates-and-fix) ✗ npm i @blueprintjs/datetime
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
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@"^16.8 || 17" from @blueprintjs/[email protected]
npm ERR! node_modules/@blueprintjs/datetime
npm ERR! @blueprintjs/datetime@"*" 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.

Additionally, a user on StackOverflow noted that their formatting issues resolved after installing blueprint-datetime. So- is blueprint-datetime's css package required for a well-functioning datepicker, or is it an unnecessary additional package? I'm having some css issues out-of-the-box and wondering if it's an issue I need to look closer at or if I'm hamstrung from the start with an unachievable dependency. Thanks for your help.

[PetrusAsikainen]

@fchasin Add this to your package.json and the errors will go away.

{
  // ...
  "overrides": {
    "@blueprintjs/datetime": {
      "@types/react": "^18",
      "react": "^18",
      "react-dom": "^18"
    }
  }
}

[fchasin]

@PetrusAsikainen that solved it, thanks!

[stefanlogue]

Is there any workaround for needing to use TimePicker from @blueprintjs/datetime and upgrading to React 18? Already moved all of our date pickers over to datetime2