Update react-scripts to 5.0.1

- Remove devServer.headers CRACO override because webpack-dev-server already sets this header with this version
- Move devServer.watchOptions CRACO override to webpack.watchOptions
- Add webpack.resolve.fallback CRACO override because Webpack5 does not inject polyfills automatically. Ref: https://webpack.js.org/configuration/resolve/#resolvefallback
- Remove hard-source-webpack-plugin because it is no longer needed with Webpack5. Ref: mzgoddard/hard-source-webpack-plugin#514 (comment)

frontend/craco.config.js

@@ -14,18 +14,7 @@
  * limitations under the License.
  */
 
-const HardSourceWebpackPlugin = require("hard-source-webpack-plugin")
-
 module.exports = {
-  devServer: {
-    headers: {
-      // This allows static files request other static files in development mode.
-      "Access-Control-Allow-Origin": "*",
-    },
-    watchOptions: {
-      ignored: [/node_modules/, "*.test.{ts,tsx}", /cypress/],
-    },
-  },
   jest: {
     configure: jestConfig => {
       jestConfig.setupFiles = ["jest-canvas-mock"]
@@ -49,8 +38,16 @@ module.exports = {
     },
   },
   webpack: {
-    configure: webpackConfig => {
+    configure: (webpackConfig, { env }) => {
+      webpackConfig.watchOptions = {
+        ignored: ['**/node_modules', "*.test.{ts,tsx}", "**/cypress"],
+      },
+
       webpackConfig.resolve.mainFields = ["module", "main"]
+      webpackConfig.resolve.fallback = {
+        buffer: false,
+        util: false,
+      }
 
       // Apache Arrow uses .mjs
       webpackConfig.module.rules.push({
@@ -62,7 +59,7 @@ module.exports = {
       // find terser plugin
       const minimizerPlugins = webpackConfig.optimization.minimizer
       const terserPluginIndex = minimizerPlugins.findIndex(
-        item => item.options.terserOptions
+        item => item.constructor.name === "TerserPlugin"
       )
 
       if (process.env.BUILD_AS_FAST_AS_POSSIBLE) {
@@ -83,15 +80,6 @@ module.exports = {
       } else {
         const parallel = process.env.CIRCLECI ? false : true
         minimizerPlugins[terserPluginIndex].options.parallel = parallel
-
-        // HardSourceWebpackPlugin adds aggressive build caching.
-        // More info: https://github.com/mzgoddard/hard-source-webpack-plugin
-        //
-        // This speeds up builds for local development.  Empirically, however, it
-        // seems to slow down one-time production builds, so we are making it
-        // possible to turn it off via setting BUILD_AS_FAST_AS_POSSIBLE=1.  This
-        // is useful in CircleCI, when doing releases, etc.
-        webpackConfig.plugins.unshift(new HardSourceWebpackPlugin())
       }
 
       return webpackConfig

frontend/package.json

@@ -118,7 +118,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.7",
-    "@craco/craco": "^6.1.2",
+    "@craco/craco": "^7.0.0",
     "@emotion/babel-plugin": "^11.7.2",
     "@emotion/jest": "^11.10.5",
     "@loaders.gl/images": "2.3.13",
@@ -174,13 +174,12 @@
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-no-relative-import-paths": "^1.5.2",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-no-relative-import-paths": "^1.5.2",
     "fetch-mock": "^9.11.0",
-    "hard-source-webpack-plugin": "^0.13.1",
-    "jest": "26.6.0",
+    "jest": "27.5.1",
     "jest-canvas-mock": "^2.4.0",
     "jest-fetch-mock": "^3.0.3",
     "jest-github-actions-reporter": "^1.0.3",
@@ -190,12 +189,12 @@
     "prettier": "^2.8.1",
     "prop-types": "^15.7.2",
     "react-responsive-carousel": "^3.2.23",
-    "react-scripts": "4.0.3",
+    "react-scripts": "5.0.1",
     "source-map-explorer": "^2.5.3",
     "start-server-and-test": "^1.15.2",
     "timezone-mock": "^1.3.6",
     "typescript": "^4.9.4",
-    "webpack": "4.44.2"
+    "webpack": "5.75.0"
   },
   "resolutions": {
     "@types/react": "17.0.7",