Update to CRA react-scripts 5.x.x

[antgamdia]

Description:

PRs intended to reduce some security issues (like #4011 ) are being rejected due to the non-trivial required effort. The main problem is react-scrips upgrading webpack to the major release 5. There are two types of problems:

• Webpack 5 not including the polyfills it used to include (v5 used to include polyfills for node.js core modules by default facebook/create-react-app#11756). Consequently, all our deps relying on non-browser deps (like url, crypto. buffer, stream, etc) are not being properly ported.
  • There is an ongoing PR aimed at simplifying the webpack config w/o ejecting (V5 add back support for node builtins facebook/create-react-app#11764).
  • Alternatively, react-app-rewired can be used.
• Webpack 5 now enforces the rule "a package.json top-level field type with a value of module should make modules load as ES modules", that is, they have to define an extension. Currently, clarity deps are not doing that (an issue should be eventually open in their repo).
  • Some related issues in CRA: "type": "module" with React. [module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'] facebook/create-react-app#11865 and Bug: [5.0] Can't resolve 'react/jsx-runtime' facebook/create-react-app#11769
  • Alternatively, we can "patch" the affected deps as mentioned in Bug: [5.0] Can't resolve 'react/jsx-runtime' facebook/create-react-app#11769 (comment).

My current recommendation is to wait until the CRA team come up with a recommendation for both sort of problems.

Steps to reproduce the issue:

1. Update to CRA >= 5.0.0

Describe the results you received:

The app cannot be started or built.

Describe the results you expected:

Everything up and running.

[castelblanque]

More info about react-scripts 4.x vulnerabilities in #4502