Move from create-react-app to Vite or Webpack

[LuiggiTenorioK]

We need to migrate our project from Create React App (CRA) to Vite/Webpack due to several reasons, including security concerns and performance improvements.

The idea is that:

• The project should build and run successfully using Vite/Webpack
• All existing functionality should remain intact.
• No security vulnerabilities should be present in the dependencies.

[LuiggiTenorioK]

From our build logs, we have many warnings related to react-scripts (a.k.a. create-react-app):

warning react-scripts > [email protected]: This version is no longer supported. Please see https://eslint.org/version-support for other options.
warning react-scripts > [email protected]: this package has been deprecated
warning react-scripts > babel-preset-react-app > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
warning react-scripts > babel-preset-react-app > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
warning react-scripts > babel-preset-react-app > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
warning react-scripts > babel-preset-react-app > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
warning react-scripts > babel-preset-react-app > @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.
warning react-scripts > eslint > @humanwhocodes/[email protected]: Use @eslint/config-array instead
warning react-scripts > source-map-loader > [email protected]: Use your platform's native atob() and btoa() methods instead
warning react-scripts > webpack-dev-server > [email protected]: Rimraf versions prior to v4 are no longer supported
warning react-scripts > jest > @jest/core > [email protected]: Rimraf versions prior to v4 are no longer supported
warning react-scripts > workbox-webpack-plugin > [email protected]: this package has been deprecated
warning react-scripts > @svgr/webpack > @svgr/plugin-svgo > [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
warning react-scripts > eslint > file-entry-cache > flat-cache > [email protected]: Rimraf versions prior to v4 are no longer supported
warning react-scripts > eslint > @humanwhocodes/config-array > @humanwhocodes/[email protected]: Use @eslint/object-schema instead
warning react-scripts > react-dev-utils > fork-ts-checker-webpack-plugin > [email protected]: Glob versions prior to v9 are no longer supported
warning react-scripts > webpack-dev-server > rimraf > [email protected]: Glob versions prior to v9 are no longer supported
warning react-scripts > workbox-webpack-plugin > workbox-build > [email protected]: Glob versions prior to v9 are no longer supported
warning react-scripts > babel-jest > babel-plugin-istanbul > test-exclude > [email protected]: Glob versions prior to v9 are no longer supported
warning react-scripts > jest > @jest/core > jest-config > [email protected]: Glob versions prior to v9 are no longer supported
warning react-scripts > jest > @jest/core > jest-runtime > [email protected]: Glob versions prior to v9 are no longer supported
warning react-scripts > jest > @jest/core > @jest/reporters > [email protected]: Glob versions prior to v9 are no longer supported
warning react-scripts > react-dev-utils > fork-ts-checker-webpack-plugin > [email protected]: this will be v4
warning react-scripts > webpack-dev-server > webpack-dev-middleware > [email protected]: this will be v4
warning react-scripts > workbox-webpack-plugin > workbox-build > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > workbox-window > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > workbox-routing > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > workbox-recipes > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > workbox-recipes > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > workbox-streams > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > workbox-streams > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > workbox-recipes > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > workbox-precaching > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > workbox-precaching > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
warning react-scripts > workbox-webpack-plugin > workbox-build > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > workbox-recipes > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > workbox-precaching > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > workbox-strategies > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > workbox-broadcast-update > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > workbox-recipes > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > workbox-expiration > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > workbox-range-requests > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > [email protected]: [email protected]
warning react-scripts > workbox-webpack-plugin > workbox-build > workbox-recipes > [email protected]: [email protected]
warning react-scripts > workbox-webpack-plugin > workbox-build > workbox-cacheable-response > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > [email protected]: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
warning react-scripts > workbox-webpack-plugin > workbox-build > workbox-google-analytics > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > workbox-google-analytics > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > workbox-google-analytics > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > workbox-google-analytics > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > workbox-background-sync > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > [email protected]: this package has been deprecated
warning react-scripts > workbox-webpack-plugin > workbox-build > workbox-navigation-preload > [email protected]: this package has been deprecated
warning react-scripts > @svgr/webpack > @svgr/plugin-svgo > svgo > [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
warning react-scripts > css-minimizer-webpack-plugin > cssnano > cssnano-preset-default > postcss-svgo > svgo > [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
warning react-scripts > react-dev-utils > fork-ts-checker-webpack-plugin > glob > [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
warning react-scripts > @svgr/webpack > @svgr/plugin-svgo > svgo > coa > [email protected]: You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone for joining me in this bet against the odds. Be excellent to each other.

(For a CapTP with native promises, see @endo/eventual-send and @endo/captp)
warning react-scripts > jest > @jest/core > jest-config > jest-environment-jsdom > jsdom > [email protected]: Use your platform's native atob() and btoa() methods instead
warning react-scripts > workbox-webpack-plugin > workbox-build > @rollup/plugin-replace > magic-string > [email protected]: Please use @jridgewell/sourcemap-codec instead
warning react-scripts > jest > @jest/core > jest-config > jest-environment-jsdom > jsdom > [email protected]: Use your platform's native performance.now() and performance.timeOrigin.
warning react-scripts > jest > @jest/core > jest-config > jest-environment-jsdom > jsdom > data-urls > [email protected]: Use your platform's native atob() and btoa() methods instead
warning react-scripts > jest > @jest/core > jest-config > jest-environment-jsdom > jsdom > [email protected]: Use your platform's native DOMException instead
warning @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
warning @babel/[email protected]: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.
warning @cypress/code-coverage > nyc > [email protected]: Glob versions prior to v9 are no longer supported
warning @cypress/code-coverage > nyc > [email protected]: Rimraf versions prior to v4 are no longer supported
warning @cypress/code-coverage > nyc > spawn-wrap > [email protected]: Rimraf versions prior to v4 are no longer supported
warning @cypress/code-coverage > nyc > istanbul-lib-processinfo > [email protected]: Rimraf versions prior to v4 are no longer supported
warning @cypress/instrument-cra > [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
warning eslint@8.[57](https://github.com/BSC-ES/autosubmit-gui/actions/runs/11955798977/job/33329019375#step:5:58).1: This version is no longer supported. Please see https://eslint.org/version-support for other options.
warning source-map-explorer > [email protected]: Glob versions prior to v9 are no longer supported
warning source-map-explorer > temp > [email protected]: Rimraf versions prior to v4 are no longer supported
warning source-map-explorer > temp > rimraf > [email protected]: Glob versions prior to v9 are no longer supported