feat: upgrade react to v18 #876

kabaros · 2024-09-10T19:10:43Z

Upgrades the platform and runtime to use react 18. Implements LIBS-630.

Testing setup

Clone this repo and checkout the react-upgrade branch, then we will use yalc to publish a new version of platform and runtime to use in our projects (follow the order described):

app-platform/shell

Go to app-platform/shell (make sure you're on react-upgrade branch) then run yalc publish

app-platform/cli

Go to app-platform/cli and add a dependency to app-shell that we just published with yalc add @dhis2/app-shell@12.0.0-alpha.11

Then edit the files section of package.json to include .yalc, it will look like:

Note

this is needed to make sure that the depdency of the dependency is also linked using yalc - see issue for context

app-runtime/runtime

Also clone the app-runtime react-upgrade, then go to app-runtime/runtime and run yalc publish

Test the upgrade of a project

Now navigate to a project to test the upgrade (I tested with data-entry-app, import-export and app-management)

Run yalc add @dhis2/cli-app-scripts@12.0.0-alpha.11 to replace the version of cli-app-scripts with the locally published one
Run yalc add @dhis2/app-runtime@3.10.4-alpha.1 (this doesn't seem to be necessary as the peer depdendency is lenient and resolves to react version in the shell?)
if this is a project that wasn't upgrade for vite, then run ~/code/dhis/platform/app-platform/cli/bin/d2-app-scripts migrate js-to-jsx (change to the correct path to where you have app-platform cloned)

What to check?

The first sanity checks should be that when you run yarn test, you should see a log that it's using react@18

and similarly you should see a console.log in the running app

These are your sanity checks that you're running the correct version after all this depdendency madness

Then:

run yarn why react and ensure it resolves react@18
run yarn start and do a sanity check that the app works
run yarn build - you will likely need to run npx yarn-deduplicate before yarn build works (you will get an error about duplication in yarn.lock)
make sure you don't get this warning in the browser console ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17
any other exploratory testing...

Notes

For testing, you should also read this blog post about upgrading to react@18 as it might give clues about things that can break in different apps.
One major change in React@18 is automatic batching which would affect places we're doing multiple state updates inside a setTimeout for example - I had a quick look through our code base and didn't find this pattern used, but it's something to look for for people upgrading their apps.

Checklist / Known issues

Look at types and react-dom upgrades, and react-testing-library (jest?, anything else..)
~~RTL shell is broken~~ false alarm
The UI library is generating this error Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead - needs a separate update to UI
Have written Documentation
Has tests coverage

Screenshots

amcgee

LGTM, made a few comments - mainly asking if we should either:

enforce ^18 as the peerdep for app-adapter (my current preference, moving forward and breaking at v12
OR specify a union of ^16.8 and ^18 for shell dependencies as well

Either is fine with me, and we can refine after it's in alpha if that's easier

amcgee · 2024-09-12T16:23:22Z

adapter/package.json

@@ -44,7 +43,7 @@
        "classnames": "^2",
        "moment": "^2",
        "prop-types": "^15",
-        "react": "^16.8",
+        "react": "^16.8 || ^18",


Should this be just ^18? If not, maybe all dependencies (including shell, which isn't a peerdep) should use the union ^16.8 || ^18? That would allow an app to specify ^16.8 and yarn would resolve to a single React version 16.8 since that would satisfy both. Otherwise if we're forcing a minimum version of 18 we could say ^18 and drop the ^16.8 in this peer dep?

Maybe easier to explain on a quick call or chat next week. It may be fine to leave this as-is, just curious what the reasoning is.

yeah it should have been just ^18, updated it now - my reasoning was related to my question on why react is not a peer dependency of the shell. I thought the shell and adapter could live with either react@16 or 18, but that's not possible anyhow as the changes in the shell would only work in React@18 and it is the shell that provides react to consuming apps.

I also marked the commit as BREAKING CHANGE.

shell/src/index.jsx

cli/src/commands/start.js

shell/package.json

BREAKING CHANGE: require react version 18

# [12.0.0-alpha.14](v12.0.0-alpha.13...v12.0.0-alpha.14) (2024-09-12) ### Features * upgrade react to v18 ([#876](#876)) ([77ecf10](77ecf10)) ### BREAKING CHANGES * require react version 18 * fix: pin react version to 18 * test: update test and test libraries for react 18

dhis2-bot · 2024-09-12T18:37:12Z

🎉 This PR is included in version 12.0.0-alpha.14 🎉

The release is available on:

Your semantic-release bot 📦🚀

# [12.0.0](v11.7.5...v12.0.0) (2024-12-13) ### Bug Fixes * **deps:** upgrade app-runtime and ui ([#895](#895)) ([8ed0ec3](8ed0ec3)) * **deps:** upgrade react to 18 in example apps ([#900](#900)) ([7fd16d7](7fd16d7)) * **deps:** use npm v6 before publishing ([01ad502](01ad502)) * **init:** update bootstrap script branch ([#896](#896)) ([33c261a](33c261a)) * **plugin:** clean up resize observer and handle sonarqube warnings ([#898](#898)) ([f113dd5](f113dd5)) * alerts from plugins [LIBS-695] ([#881](#881)) ([21be0d2](21be0d2)) * allow serving files from cwd node_modules ([0233949](0233949)) * base url env & refactor [LIBS-635] ([#872](#872)) ([7f19259](7f19259)) * bump ui library ([#882](#882)) ([1ae9569](1ae9569)) * clear only required build dirs ([#894](#894)) ([179305f](179305f)) * env refactor for Vite wrap-up [LIBS-690] ([#889](#889)) ([84da4e6](84da4e6)) * injectPrecacheManifest warning logging ([a0d266e](a0d266e)) * normalize to .js extensions when compiling libraries ([#893](#893)) ([58b33a8](58b33a8)) * **service-worker:** handle undefined config vars in injectPrecacheManifest ([a90a4e0](a90a4e0)) * correct app shell paths ([#883](#883)) ([a1af71c](a1af71c)) * handle jsx in js support [LIBS-633] ([#871](#871)) ([595a35d](595a35d)) * increase precache max file size to 3 MB ([b20ed22](b20ed22)) * remove custom eslint from TS template ([71cef4b](71cef4b)) * update deps ([1e7ce93](1e7ce93)) * update workbox deps to avoid deprecation warnings ([9a81c4a](9a81c4a)) * use strings for 'boolean' env vars ([eaf5e66](eaf5e66)) ### Features * create initial TS template ([#868](#868)) ([2795f79](2795f79)) * enable HMR for .js files ([5f4683c](5f4683c)) * handle plugins with Vite [LIBS-610] ([#863](#863)) ([ca5be0d](ca5be0d)) * jsx migration script ([#869](#869)) ([7764f49](7764f49)) * migrate snap files too ([#878](#878)) ([521f483](521f483)) * replace CRA with Vite [LIBS-598] ([#847](#847)) ([3dd0e59](3dd0e59)) * upgrade react to v18 ([#876](#876)) ([77ecf10](77ecf10)) * **init:** set direction: 'auto' and import locales for new apps [LIBS-645] ([#867](#867)) ([4eda4a9](4eda4a9)) ### BREAKING CHANGES * require react version 18 * fix: pin react version to 18 * test: update test and test libraries for react 18 * Supported Node versions are 18.x or 20+ * ci: upgrade Node version * fix: always add PWA_ENABLED to app env for better static analysis * chore: pause precache manifest injection * fix: building SW without CRA * chore: comment update * fix: group moment locales in their own dir * refactor: clean up precache injection * fix: locale utils and handling moment in jest * fix: compile correctly after merging changes * chore: comment in compile.js * chore: some clean-up * chore: comments * fix: use port 3000 for the dev server * fix: improve moment locale chunk naming * chore: remove CRA * fix: use mjs build of Vite * fix: bump cli-style for CRA fix * feat: use interactive dev server output from Vite * fix: make dev server port configurable * chore: remove old index.html * fix: env tweaks

dhis2-bot · 2024-12-13T13:06:51Z

🎉 This PR is included in version 12.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

kabaros force-pushed the react-upgrade branch 3 times, most recently from b2da38a to b483ad9 Compare September 11, 2024 06:31

This was referenced Sep 11, 2024

feat: upgrade app-runtime React version to v18 dhis2/app-runtime#1387

Merged

refactor: upgrade to React 18 dhis2/aggregate-data-entry-app#396

Closed

refactor: upgrade to react v18 dhis2/data-visualizer-app#3208

Closed

kabaros force-pushed the react-upgrade branch 2 times, most recently from 9caf1bf to dd3283d Compare September 12, 2024 15:28

kabaros marked this pull request as ready for review September 12, 2024 16:01

amcgee approved these changes Sep 12, 2024

View reviewed changes

feat: upgrade react to v18

4b2f9de

BREAKING CHANGE: require react version 18

kabaros force-pushed the react-upgrade branch from dd3283d to e71e872 Compare September 12, 2024 17:55

kabaros added 2 commits September 12, 2024 18:56

fix: pin react version to 18

fb4e15c

test: update test and test libraries for react 18

7e5f03a

kabaros force-pushed the react-upgrade branch from e71e872 to 7e5f03a Compare September 12, 2024 17:56

kabaros merged commit 77ecf10 into alpha Sep 12, 2024
6 checks passed

kabaros deleted the react-upgrade branch September 12, 2024 18:29

dhis2-bot added the released on @alpha label Sep 12, 2024

kabaros mentioned this pull request Sep 14, 2024

fix: update default props to JS default params dhis2/ui#1598

Merged

dhis2-bot added the released label Dec 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: upgrade react to v18 #876

feat: upgrade react to v18 #876

kabaros commented Sep 10, 2024 •

edited

Loading

amcgee left a comment

amcgee Sep 12, 2024

kabaros Sep 12, 2024 •

edited

Loading

dhis2-bot commented Sep 12, 2024

dhis2-bot commented Dec 13, 2024

feat: upgrade react to v18 #876

feat: upgrade react to v18 #876

Conversation

kabaros commented Sep 10, 2024 • edited Loading

Testing setup

app-platform/shell

app-platform/cli

app-runtime/runtime

Test the upgrade of a project

What to check?

Notes

Checklist / Known issues

Other Questions / Discussions

Screenshots

amcgee left a comment

Choose a reason for hiding this comment

amcgee Sep 12, 2024

Choose a reason for hiding this comment

kabaros Sep 12, 2024 • edited Loading

Choose a reason for hiding this comment

dhis2-bot commented Sep 12, 2024

dhis2-bot commented Dec 13, 2024

kabaros commented Sep 10, 2024 •

edited

Loading

kabaros Sep 12, 2024 •

edited

Loading