Use CRACO to workaround CRA #11770

Signed-off-by: Taylor Smock <[email protected]>
hotosm · Jul 5, 2023 · 5a7b481 · 5a7b481
1 parent 7a5e268
commit 5a7b481
Show file tree

Hide file tree

Showing 3 changed files with 3,467 additions and 5,568 deletions.
diff --git a/frontend/craco.config.js b/frontend/craco.config.js
@@ -0,0 +1,28 @@
+module.exports = {
+  webpack: {
+    configure: (webpackConfig, { env, paths }) => {
+      // Fix CRA #11770
+      const rules = webpackConfig.module.rules;
+      for (const rule of rules) {
+        if (Object.hasOwn(rule, 'oneOf')) {
+          rule.oneOf.filter((currentValue, index, arr) => {
+            const toRemove =
+              currentValue.test instanceof RegExp && currentValue.test.test('something.svg');
+            if (toRemove) {
+              arr.splice(index, 1);
+            }
+            return toRemove;
+          });
+          rule.oneOf.push({
+            test: /\.svg$/i,
+            issuer: {
+              and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
+            },
+            type: 'asset',
+          });
+        }
+      }
+      return webpackConfig;
+    },
+  },
+};
diff --git a/frontend/package.json b/frontend/package.json
@@ -55,7 +55,6 @@
     "react-placeholder": "^4.1.0",
     "react-redux": "^8.1.1",
     "react-router-dom": "^6.13.0",
-    "react-scripts": "^4.0.3",
     "react-select": "^5.7.3",
     "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'"
   },
@@ -109,6 +108,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@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",
@@ -117,6 +117,7 @@
     "jest-canvas-mock": "^2.5.1",
     "msw": "0.49.2",
     "prettier": "^2.8.8",
+    "react-scripts": "^5.0.1",
     "react-select-event": "^5.5.1",
     "react-test-renderer": "^17.0.2",
     "source-map-explorer": "^2.5.3"