[FOLIO-3876] Poppy 2023 R2 - BREAKING upgrade react to v18 Created: 26/Jun/23  Updated: 30/Nov/23  Resolved: 25/Oct/23

Status: Closed
Project: FOLIO
Components: None
Affects versions: None
Fix versions: None

Type: Epic Priority: TBD
Reporter: Zak Burke Assignee: Unassigned
Resolution: Done Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original estimate: Not Specified

Issue links:
Relates
relates to ERM-2994 Upgrade stripes-kint-components React... Closed
relates to ERM-2995 Upgrade stripes-erm-testing React to v18 Closed
relates to ERM-2996 Upgrade ui-dashboard React to v18 Closed
relates to ERM-2997 Upgrade ui-handler-stripes-registry R... Closed
relates to ERM-2998 Upgrade platform-erm React to v18 Closed
relates to UICR-187 upgrade React to v18 Closed
relates to UILDP-102 upgrade Stripes to v9 and React to v18 Closed
relates to UIPCIR-55 upgrade React to v18 Closed
relates to UIPFIMP-59 upgrade React to v18 Closed
relates to UIBULKED-337 upgrade React to v18 Closed
relates to UIDATIMP-1485 upgrade React to v18 Closed
relates to UIIN-2508 Upgrade React to v18. Closed
relates to ERM-2984 upgrade ui-erm-comparisons React to v18 Closed
relates to ERM-2985 upgrade ui-local-kb-admin React to v18 Closed
relates to ERM-2986 upgrade ui-plugin-find-license React ... Closed
relates to ERM-2987 upgrade ui-plugin-find-agreement Reac... Closed
relates to ERM-2988 upgrade ui-plugin-find-eresource Rea... Closed
relates to ERM-2989 Upgrade stripes-erm-components React ... Closed
relates to ERM-2990 Upgrade ui-licenses React to v18 Closed
relates to ERM-2991 Upgrade ui-agreements React to v18 Closed
relates to SI-27 upgrade React to v18 Closed
relates to SI-28 upgrade React to v18 Closed
relates to SI-29 upgrade React to v18 Closed
relates to STDTC-92 upgrade React to v18 Closed
relates to UIAC-69 upgrade React to v18 Closed
relates to UICAL-270 upgrade React to v18 Closed
relates to UICHKIN-388 upgrade React to v18 Closed
relates to UICHKOUT-860 upgrade React to v18 Closed
relates to UICIRC-966 upgrade React to v18 Closed
relates to UICIRCLOG-129 upgrade React to v18 Closed
relates to UICONSET-138 upgrade React to v18 Closed
relates to UID-131 upgrade React to v18 Closed
relates to UIDEXP-332 upgrade React to v18 Closed
relates to UIEH-1384 upgrade React to v18 Closed
relates to UIEUS-337 upgrade React to v18 Closed
relates to UIEXPMGR-93 upgrade React to v18 Closed
relates to UIF-470 upgrade React to v18 Closed
relates to UIGS-18 upgrade React to v18 Closed
relates to UIINREACH-227 upgrade React to v18 Closed
relates to UIMARCAUTH-300 upgrade React to v18 Closed
relates to UIMPROF-83 upgrade React to v18 Closed
relates to UINOTES-146 upgrade React to v18 Closed
relates to UINV-493 upgrade React to v18 Closed
relates to UIOA-216 upgrade React to v18 Closed
relates to UIOAIPMH-69 upgrade React to v18 Closed
relates to UIOR-1134 upgrade React to v18 Closed
relates to UIORGS-377 upgrade React to v18 Closed
relates to UIPBEX-51 upgrade React to v18 Closed
relates to UIPER-115 upgrade React to v18 Closed
relates to UIPFAUTH-69 upgrade React to v18 Closed
relates to UIPFCONT-33 upgrade React to v18 Closed
relates to UIPFF-15 upgrade React to v18 Closed
relates to UIPFI-121 upgrade React to v18 Closed
relates to UIPFINT-35 upgrade React to v18 Closed
relates to UIPFO-40 upgrade React to v18 Closed
relates to UIPFPAT-55 upgrade React to v18 Closed
relates to UIPFPOL-58 upgrade React to v18 Closed
relates to UIPFU-70 upgrade React to v18 Closed
relates to UIPFUDP-30 upgrade React to v18 Closed
relates to UIPQB-43 upgrade React to v18 Closed
relates to UIQM-532 upgrade React to v18 Closed
relates to UIREC-280 upgrade React to v18 Closed
relates to UIREQ-998 upgrade React to v18 Closed
relates to UIRS-102 upgrade React to v18 Closed
relates to UISACQCOMP-157 upgrade React to v18 Closed
relates to UISAUTCOMP-62 upgrade React to v18 Closed
relates to UISER-32 upgrade React to v18 Closed
relates to UISP-46 upgrade React to v18 Closed
relates to UITAG-70 upgrade React to v18 Closed
relates to UITEN-254 upgrade React to v18 Closed
relates to UIU-2921 upgrade React to v18 Closed
Epic Name: react 18
Sprint:
Development Team: None
Release: Poppy (R2 2023)

 Description   

Summary: Upgrade react to v18, including tests, test infrastructure (in the case of BTOG) and possible updates to component code. THIS IS A BREAKING CHANGE. 

Details: Update react and its related packages in package.json with the commands such as the following:

yarn add -D react@^18.2.0 react-dom@^18.2.0 @folio/stripes-cli@^3.0.0 @folio/eslint-config-stripes@^7.0.0
yarn add -P react@^18.2.0 react-dom@^18.2.0 @folio/stripes@^9.0.0

Updating the lower range of a peer-dependency is a breaking change, so you must increment your package-version to its next major version (e.g. if the current version is 7.1.0 then update to 8.0.0; if the current version is 6.0.0 then update to 7.0.0). You may need to update individual @folio/stripes-* packages as well. The versions that correspond to @folio/stripes v9.0.0 are:

"@folio/stripes-components": "~12.0.0",
"@folio/stripes-connect": "~9.0.0",
"@folio/stripes-core": "~10.0.0",
"@folio/stripes-final-form": "~8.0.0",
"@folio/stripes-form": "~9.0.0",
"@folio/stripes-smart-components": "~9.0.0",
"@folio/stripes-util": "~6.0.0",

If you use Jest/RTL: A good option is to depend on and import from jest-config-stripes v2 to leverage centralized configuration and dependencies (example PR). Although this involves changing the import paths in all your tests, the following code-mod will fix up @testing-library imports within your ./src directory:

grep -rl testing-library ./src | xargs perl -pi -e 's/\@testing\-library/\@folio\/jest-config-stripes\/testing-library/g'

Alternatively, if you want to continue to maintain the infrastructure yourself, the versions that correspond to react v18 are:

"@jest/globals": "^29.6.1",
"@testing-library/dom": "^9.3.1", 
"@testing-library/react": "^14.0.0",
"babel-jest": "^29.6.1",
"jest": "^29.6.1",
"jest-environment-jsdom": "^29.6.1",
"jest-junit": "^16.0.0",

Note that some functions have changed/moved (e.g. waitFor), and the functionality of @testing-library/react-hooks has been folded directly into @testing-library/react.

If you still use BTOG: note that @bigtest/react is not compatible with react v18. If your test helpers import from stripes-core's setup-application, they should continue to work when you update stripes-core to v10; otherwise you will have to make some adjustments to mount components and visit URLs (example PR).



 Comments   
Comment by Ann-Marie Breaux (Inactive) [ 28/Jul/23 ]

Hi Zak Burke  Just to confirm - does this work need to be done in Poppy, or can it wait until Quesnelia?

Comment by Zak Burke [ 28/Jul/23 ]

Ann-Marie Breaux, this is required for Poppy. We've been talking about it for a while and posted to Slack#stripes-updates about the plan back on June 13 so hopefully teams were already anticipating it. 

Comment by Tino Ryll [ 15/Aug/23 ]

Hi Zak Burke, I was wondering if you could provide a bit more insight into the reasons behind changing the import paths. From my perspective, things seem to be functioning smoothly without altering the import paths.

Comment by Zak Burke [ 16/Aug/23 ]

Tino Ryll, you're correct that things will continue "functioning smoothly without altering the import paths" but yarn lint should complain loudly because those import paths won't match up with the packages listed in deps and dev-deps. Without changing the paths, you're directly importing a package that is only transitively imported via dependencies.

Imagine, for example, that instead of directly depending on lodash, you figured, "Hey, redux-form already depends on it so I can just use it. That'll work now, but if redux-form refactored to avoid lodash then you'd suddenly be out of luck.

Generated at Thu Feb 08 23:31:26 UTC 2024 using Jira 1001.0.0-SNAPSHOT#100246-sha1:7a5c50119eb0633d306e14180817ddef5e80c75d.