Upgrade node version and react version

[Sharathmk99]

🚀 Feature

Upgrade node version to latest to get better performance and also upgrade react and its dependent version as we couldn't install some of the 3rd party lib because Aim react version is old. For example react flow.

Motivation

Pitch

Alternatives

Additional context

[KaroMourad]

@Sharathmk99, thank you for opening the issue.

We encountered a bottleneck while upgrading to React 18, which is related to Webpack 5 and Comlink. Here is the issue PR.

I'll check if it's possible to proceed with the upgrade and will get in touch with you.

[Sharathmk99]

Thank you so much. Let me know if I can help in anyway.

[sharathmk9]

Any update on upgrade. Also material-ui is really old, any plan to upgrade to v5? Thanks

[SGevorg]

Adding this to the 3.18 Milestone. @KaroMourad is working on it.
@sharathmk9 has your team had any progress on it?

[KaroMourad]

Hi, @Sharathmk99

Upgrading Node and React Versions

The UI was created using CRA (Create React App), an officially supported method for building single-page React applications. It provides a modern build setup without the need for configuration.

However, Create React App was deprecated in early 2023, and its packages became outdated. Attempting to update Node or React versions resulted in build failures. [CRA issues](https://github.com/facebook/create-react-app/issues)

There are two solutions to upgrade Node versions:

1. Replace CRA with Vite ([recommended by CRA's creator](Replace Create React App recommendation with Vite reactjs/react.dev#5487 (comment)), Dan Abraamov)
   Vite is a frontend tool used for building fast and optimized web applications. It employs a modern build system and a fast development server, offering a streamlined and efficient development experience.
2. Replace CRA with Next.js
   Next.js allows you to create full-stack web applications, leveraging the latest React features and integrating powerful Rust-based JavaScript tooling for faster builds.

Migrating to Next.js will require considerable time as Next.js organizes routing differently, essentially requiring a rewrite of the entire UI app.

Migrating to Vite offers a more efficient way to resolve this issue. However, after two migration iterations, bugs and issues persisted. This is due to many packages used in Aim not yet being adapted to these significant updates.

Solution:
To avoid breaking the entire UI app, the decision was made to maintain the current Node version, which is v16.20.1 [v16-17], instead of upgrading to v20. The focus will be on fixing the MUI issues [replace outdated MUI packages].

[SGevorg]

@sharathmk9 what do you think about the proposed solutions?
Have you had specific progress on your end wrt this issue?

[sharathmk9]

Thank you @KaroMourad and @SGevorg for looking into this issue.

When we planned to upgrade the node version, we did face similar challenges as CRA was deprecated. We did looked into Vite and NextJS, but didn't conducted any PoC on it.

The solution makes sense, but some third party packages doesn't support node version 1.16.x. Example MUI v5 needs react 17.x.x and also node version 17.x.x.

We were integrating Argo Workflow as part of Orchestrating training jobs and we wanted to use reactflow to visualise the DAG. Did face some issue with node 16.x.x, but was able to overcome with legacy settings.

Regarding Material UI package, yes we wanted to use many predefined components part of Orchestration & Model Registry from mui v5, but ended up creating our own custom components.

Next year we will dedicated sometime to check if we can upgrade the node version, but for now mui is the only pain point.
We will update here once we start and share the outcome as well.