Use CRACO to workaround CRA #11770

Signed-off-by: Taylor Smock <[email protected]>

frontend/package.json

@@ -55,7 +55,6 @@
     "react-placeholder": "^4.1.0",
     "react-redux": "^7.2.4",
     "react-router-dom": "^6.10.0",
-    "react-scripts": "^4.0.3",
     "react-select": "^5.7.0",
     "react-tooltip": "^4.2.21",
     "reactjs-popup": "^2.0.5",
@@ -84,11 +83,11 @@
     "patch-id": "bash -c \"cp patch/imagery.min.json public/static/id/data\"",
     "patch-rapid": "bash -c \"cp patch/rapid-imagery.min.json public/static/rapid/data/imagery.min.json\"",
     "preparation": "bash -c \"if (test -a ../tasking-manager.env); then grep -hs ^ ../tasking-manager.env .env.expand > .env; else cp .env.expand .env; fi\"",
-    "start": "npm run preparation && npm run copy-static && npm run patch-id && npm run patch-rapid && react-scripts start",
-    "build": "npm run preparation && npm run update-static && npm run patch-id && npm run patch-rapid && react-scripts build",
+    "start": "npm run preparation && npm run copy-static && npm run patch-id && npm run patch-rapid && craco start",
+    "build": "npm run preparation && npm run update-static && npm run patch-id && npm run patch-rapid && craco build --stats",
     "prettier": "prettier --write 'src/**/*.js'",
     "lint": "eslint src",
-    "test": "npm run lint && react-scripts test --env=jsdom",
+    "test": "npm run lint && craco test --env=jsdom",
     "coverage": "npm run test -- --coverage --watchAll=false",
     "analyze": "source-map-explorer 'build/static/js/*.js'"
   },
@@ -108,6 +107,7 @@
     ]
   },
   "devDependencies": {
+    "@craco/craco": "^7.1.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
@@ -116,6 +116,7 @@
     "jest-canvas-mock": "^2.3.1",
     "msw": "0.49.2",
     "prettier": "^2.8.1",
+    "react-scripts": "^5.0.1",
     "react-select-event": "^5.5.1",
     "react-test-renderer": "^17.0.2",
     "source-map-explorer": "^2.5.3"