Most of the MFEs of edX are currently using React JS v16. In order to use latest React JS, we are planning to upgrade React JS to v17. React 17 doesn’t add any new developer-facing features, so its upgrade might not cause any breaking changes. Our end goal is to upgrade React to v18 but v18 no longer support enzyme, so we are upgrading to React 17 and then we’ll migrate from enzyme.
Enabling the gradual upgrades: Previously required upgrading whole app at once, gets increasingly challenging if the codebase was ancient and isn’t actively maintained. We can now upgrade it in parts apart from upgrading the whole app (better to upgrade the whole app though).
Event delegation Change: Previously attaches all the events at a document(top) level, in 17 they decided to shift from document level to the root DOM container into which React tree is rendered.
New JSX transform: React imports no longer required to use JSX, more geared towards how JSX is compiled rather than a feature change, comes with a performance boost. This does bring about code changes, but nothing major and pretty easy to manage. (Removing import statement will result in linter going off but eslint config upgrade should take care of it)
Don't emulate bubbling of the onScroll event
Use browser focusin and focusout for onFocus and onBlur
Make all Capture events use the browser capture phrase
Remove event pooling
Run useEffect cleanup function asynchronously
For some packages their older versions could cause issues with react v17 upgrade (pinned couple)
We will create tickets in each MFE for React upgrade and all the tickets will be added in Maintenance board. Then we’ll create PRs in each MFEs and will add those in the Maintenance board as well.
Node version set to 18
Update react & react-dom to v17
Remove node_modules, package-lock. rm -rf node_modules package-lock.json
Reinstall and re-build: npm install && npm run build
You may need to upgrade other libraries, for example in case of Typescript: npm install @types/react@17.0.0 If you are using React Testing Library, you would want to be under 12.1.5, which is the latest version that supports React < 18. Replace enzyme-adapter-react-16 with @wojtekmaj/enzyme-adapter-react-17 since enzyme doesn't provide support for react 17. react-test-renderer should also be updated.
Upgrade all other packages causing dependency conflicts
Upgrade all edx packages used in the MFE to their react 17 versions
Try to run the project npm run start and fix dependencies along with possible breaks, note all the issues
Remove node_modules, package-lock. rm -rf node_modules package-lock.json
Reinstall and re-build: npm install && npm run build
Run unit tests, linting and build scripts if exists.
Test extract (pull/push) translations
Start & test the project, full regression test and hopefully a good coverage
Perform consumer testing if its a library to check its impacts on consumers
If its a library and consumers are breaking with React JS upgrade, it should be release as a major version so renovate doesn’t auto merge its changes in consumers.
https://github.com/openedx/platform-roadmap/issues/277
In case of any help/queries, you can contact us on slack at #tech-fed-bom.