[Spike] Update react-script to use version 5.0.0

[TomNUSDS]

Need to upgrade because 4.x depends on outdated libraries.
Upgrading from 4.x -> 5.x of react-script build breaks the build.
SimpleReport has done the upgrade. Examine how they've done it (seems like a lot of work).
Remove the "peerDependencies" and "resolutions" sections related to react-scripts once it's upgraded.

[meckila]

Spike Notes (until granted SharePoint access)
Relevant Scripts

"start:localdev": "env-cmd -f .env.development craco start",
"build:staging": "env-cmd -f .env.staging craco build",
"build:production": "env-cmd -f .env.production craco build",
"postbuild:staging": "cp build/index.html build/404.html",
"postbuild:production": "cp build/index.html build/404.html",

• env-cmd →node program for executing commands using an environment from an env file

• craco→configuration layer for create-react-app that allows for customization without using eject command from create-react-app

• eject will remove create-react-app build dependency and copy all config files and transitive dependencies (webpack, babel, eslint, etc.) over for full control

• react-scripts→scripts from create-react-app (kickstart project without config)

Error Reproduction Steps

cd react-frontend && 
yarn upgrade react-scripts@^ #pick 5.0.0, the latest
yarn start:localdev

Error Output:

ERROR in ./src/global.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./node_modules/sass-resources-loader/lib/loader.js??ruleSet[1].rules[1].oneOf[7].use[5]!./src/global.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
6 │ @import '~uswds/dist/scss/theme/uswds-theme-general';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/global.scss 6:9  root stylesheet
SassError: SassError: Can't find stylesheet to import.
  ╷
6 │ @import '~uswds/dist/scss/theme/uswds-theme-general';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/global.scss 6:9  root stylesheet
    at /Users/meckilabritt/workspace/prime-reportstream/frontend-react/node_modules/sass-loader/dist/index.js:54:16
    at Function.call$2 (/Users/meckilabritt/workspace/prime-reportstream/frontend-react/node_modules/sass/sass.dart.js:99012:16)
    at render_closure1.call$2 (/Users/meckilabritt/workspace/prime-reportstream/frontend-react/node_modules/sass/sass.dart.js:84527:12)
    at _RootZone.runBinary$3$3 (/Users/meckilabritt/workspace/prime-reportstream/frontend-react/node_modules/sass/sass.dart.js:29558:18)
    at _FutureListener.handleError$1 (/Users/meckilabritt/workspace/prime-reportstream/frontend-react/node_modules/sass/sass.dart.js:28080:21)
    at _Future__propagateToListeners_handleError.call$0 (/Users/meckilabritt/workspace/prime-reportstream/frontend-react/node_modules/sass/sass.dart.js:28387:49)
    at Object._Future__propagateToListeners (/Users/meckilabritt/workspace/prime-reportstream/frontend-react/node_modules/sass/sass.dart.js:3901:77)
    at _Future._completeError$2 (/Users/meckilabritt/workspace/prime-reportstream/frontend-react/node_modules/sass/sass.dart.js:28233:9)
    at _AsyncAwaitCompleter.completeError$2 (/Users/meckilabritt/workspace/prime-reportstream/frontend-react/node_modules/sass/sass.dart.js:27881:12)
    at Object._asyncRethrow (/Users/meckilabritt/workspace/prime-reportstream/frontend-react/node_modules/sass/sass.dart.js:3704:17)
 @ ./src/global.scss 8:6-465 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-435 83:0-435 84:22-29 84:33-47 84:50-64 61:4-74:5
 @ ./src/index.tsx 8:0-23

ERROR in Failed to load plugin 'flowtype' declared in 'package.json » eslint-config-react-app': Cannot find module 'eslint-plugin-flowtype'
Require stack:
- /Users/meckilabritt/workspace/prime-reportstream/frontend-react/node_modules/eslint-config-react-app/index.js

webpack 5.68.0 compiled with 2 errors and 81 warnings in 23644 ms
No issues found.

Investigation Notes

• React Scripts 4 to 5 Breaking Changes

  • create-react-app
    • #11322 Use env var to detect yarn or npm as the package manager (@lukekarrys)
  • babel-preset-react-app, cra-template-typescript, cra-template, create-react-app, eslint-config-react-app, react-app-polyfill, react-dev-utils, react-error-overlay, react-scripts
    • #11201 Webpack 5 (@raix)
  • eslint-config-react-app, react-error-overlay, react-scripts
    • #10761 chore: migrate to @babel/eslint-parser (@JLHwung)
  • react-scripts
    • #11188 Deprecate root level template.json keys (@mrmckeb)

• craco-sass-resources-loader is archived

  • Lets us load to the global.scss stylesheet
  • Layer of abstraction for style loaders?
  • sass-resources-loader uses sass-loader→ look into alternative resolution with craco config under style section? (sample from CRACO README.md documentation below)

  module.exports = {
      reactScriptsVersion: "react-scripts" /* (default value) */,
      style: {
          modules: {
              localIdentName: ""
          },
          sass: {
              loaderOptions: { /* Any sass-loader configuration options: https://github.com/webpack-contrib/sass-loader. */ },
              loaderOptions: (sassLoaderOptions, { env, paths }) => { return sassLoaderOptions; }
          },
  
  

• Ejecting would be a nuclear option and require hands-on ownership of webpack.config

• CRACO is not compatible with react-scripts 5 according to issue #378

• Using the alpha 7 version of CRACO resulted in the same error

• 2 versions of uswds exist, one explicitly as a package and another as a dependency of [react-uswds]( "uswds": "2.11.2",)

Saved Links
mswjs/msw#1030

[TomNUSDS]

Sorry I'm just commenting. This is some GREAT research. Thanks!

What's your recommendation? Get rid of Craco and just use react-scripts or wait for a Craco update?

[meckila]

Sorry I'm just commenting. This is some GREAT research. Thanks!

What's your recommendation? Get rid of Craco and just use react-scripts or wait for a Craco update?

Removing the craco config and attempting to build without it resulted in the same error. Ejecting appears to be the only option if we want to update, but would recommend a technical discovery ticket on what it takes to eject and upgrade react-scripts.

[rachelhanster]

@bgantick @meckila @TomNUSDS Given the technical research into this, can you please describe work to be done in separate ticket?
cc @BerniXiongA6

[bgantick]

I'll get next steps captured in a separate tech debt ticket and link it here.

[TomNUSDS]

I think the recommended solution was to wait for craco to update their component to be compatible?
This would mean minimal work for us.

So far, we've been able to take security patches by using yarn's "resolutions"and "peerDependencies" feature.