Migrate chore dependencies to the latest stable versions

[coderatomy]

Description

Our application relies on several chore dependencies, essential components that ensure the smooth functioning of various features. Over time, some of these dependencies have become outdated and, in certain cases, have been archived. Utilizing archived dependencies poses a significant risk to our application’s stability and security. Outdated dependencies are more susceptible to vulnerabilities, which can be exploited by malicious entities, potentially leading to data breaches, system failures, or other security incidents.

It is best to perform this major upgrade when our application isn't that huge yet. This limits the regressions we are bound to face in the future

Major reason for ths upgrade:

• Reduced Support: As dependencies become obsolete, support for older versions diminishes. This means that if we encounter issues with archived dependencies, it would be increasingly difficult to find solutions, potentially causing downtime and user dissatisfaction.

• Security and Vulnerability Mitigation: The primary reason for this update is to enhance the security posture of our application. Older dependencies might contain known vulnerabilities that have been addressed in the latest versions. By migrating to the latest stable versions, we can significantly reduce the risk of security breaches and unauthorized access.

Tasks

• [x] Migrate to material UI v5

  • Release note
  • Migration guide

• [x] Migrate to react-router-dom v6

  • Migration guide
  • Release note

• [x] React and React-dom v17

• [x] React-scripts v5

• [x] React-toastify v9

• [x] Axios v1

• [x] Dayjs v1

• [x] i18next v23

  • Migration guide

• [x] i18next-browser-languagedetector v7

• [x] i18next-http-backend v2

• [x] intl-tel-input v18

• [x] React-i18next v13

• [x] React-redux v8

  • Notes

• [x] Web-vitals v3

• [x] Workerize-loader v2

• [x] Yup v1

Important Notes

In our development environment, React 18 presents exciting opportunities with its innovative features, allowing us to create exceptional applications. However, a significant drawback arises due to the incompatibility between React 18 and '@mui/styles', the legacy JSS styling solution. As we transition from jss to Emotion, we surely should consider migration to React 18 Check here for more...

Finalising task

• [ ] Report and fix any breakings
• [ ] Test your changes and make sure nothing is breaking

[tuxology]

Thanks @coderatomy for this mammoth work and attempt (#940) and highlighting a very important task (which is also linked to UI upgrades we plan) This is also one that will require a very thorough testing, deployment tests and will unfortunately block all other contributions while this gets sorted out. Since we are still in the process of accepting changes from folks, would you be willing to keep #940 updated from time to time? The goal is to merge this when we wind down other contributions and block almost a week to hash this out. Just pointing this out - worth only if you remain committed to this 😉

CC: @NdibeRaymond @kamthamc Need your views and agreement on this as well 🙏

[kamthamc]

For security and vulnerability we can get alerts from dependabot and upgrade if it affects.

Its nice to stay on latest version but some of the migrations like mui is hard and has a lot of breaking changes. Some of the tools provide codemods which are nice but it still might miss something. And we also need to check the dependencies if any of them breaks because of these dependencies.

If we decide to do upgrade we have to do a thorough check. And also stop others from working on the project if because of breaking changes like mui.

We could upgrade libs with non breaking changes and upgrade the remaining while the contributions are minimal.

[coderatomy]

For about a week, I was having this work locally and kept on updating it. So concerning commitment on this, am in.

We actually shouldn't block any contribution as of now. We can temporarily deploy this branch chore/breaking somewhere such that anyone can test and see the progress, and also report some bugs.

Concerning material UI. According to the context I have so far, the only breaking change that I presume we ignore for now is switching from jss to emotion. This migration can be done gradually in later contributions. We can go on using emotion for new features as we update the previous i.e. After the PR is merged

Packages linked with migration guide and release note are the ones where I faced some breakings after the upgrade. The rest were just a direct bump, though some have new features that are worthy checking out. Like react-toastify. But of-course all this will be in follow-up tasks