GovAlta
fix(#2413): react 19 upgrade
Run npm ci or npm install
Before (the change)
Could not use react 19 in a project when importing @abgov/react-components without a peer dependency conflict.
After (the change)
Should no longer encounter a peer dependency conflict when using react 19 in a project that imports @abgov/react-components. An upgrade to React 19 was required.
Upgrade to React 19:
- followed react 19 upgrade guide: https://react.dev/blog/2024/04/25/react-19-upgrade-guide
- upgraded 4 packages to react version 19.0.0:
npm install --save-exact react@^19.0.0 react-dom@^19.0.0 @types/react@^19.0.0 @types/react-dom@^19.0.0 - ran codemon for react
npx codemod@latest react/19/migration-recipe- no changes
- ran codemon for react typescript:
npx types-react-codemod@latest preset-19 ./_templates/react- it changed "ref" objects in .tsx files (in React 19 "useRef" works more like "useContext"). Some manual changes were needed, like in form.tsx for example:
-
ref?: React.MutableRefObject<HTMLElement | undefined>;-->ref?: React.RefObject<HTMLElement | null>;because MutableRefObject is deprecated. -
const el = useRef<HTMLElement>();-->const el = useRef<HTMLElement>(null);because initializing RefObject is required andundefinedis disallowed.
-
- See React 19 Upgrade guide: https://react.dev/blog/2024/04/25/react-19-upgrade-guide#useref-requires-argument
- it changed "ref" objects in .tsx files (in React 19 "useRef" works more like "useContext"). Some manual changes were needed, like in form.tsx for example:
- attempted build, then had to manually changed each react component that defines a custom element to be used in its return statement. Take form.tsx for example:
- before the change it would throw an error during `nx run react-components:build:production': "error TS2339: Property 'goa-simple-form' does not exist on type 'JSX.IntrinsicElements'."
- The error and solution are somewhat similar to what is described here: https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/71395#discussioncomment-11525908
- See React 19 Upgrade guide: https://react.dev/blog/2024/04/25/react-19-upgrade-guide#the-jsx-namespace-in-typescript
- needed to change all boolean values in react components to convert to string when passed to related web component.
- Changed boolean in a consistent way so that react components do not set a default, allowing props for setting boolean values to optional.
- Updated all related tests to
- render a component with only required value and check boolean flags to make sure they're optional
- render a component with non-required properties and set any boolean flags to true to make sure they can be set
- built without errors, served react playground
- upgraded libs/react-components/package.json: allow peer dependencies for react ^19.0.0
- Should no longer encounter a peer dependency conflict when using react 19 in a project that imports @abgov/react-components.
Steps to test
- run
npm cito upgrade locally and confirm there are no peer dependency conflicts - optional: could try each component in react playground and toggle settings related to changed boolean flags (although there's test coverage for all of the changed boolean flags)
27th March 2025, I tested with React 18, and React 19. Both works well.
@BumbleB2na Thanks for rebasing, unfortunately after some other merges it is out of sync again :)
@chrisolsen rebased and ready for re-review. See this comment: https://github.com/GovAlta/ui-components/pull/2460#discussion_r2056727047
:tada: This PR is included in version 1.33.0-alpha.15 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 6.3.0-alpha.5 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 4.3.0-alpha.4 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 1.3.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 4.3.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 1.33.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
:tada: This PR is included in version 6.3.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket: