Upgrade CRACO to v7.1.0 & react-scripts to v5.0.1 (source-academy#2376)

* Update CRACO from v6.4.5 to v7.1.0 * Update react-scripts from v4.0.3 to v5.0.1 * Remove selective dependency resolution of react-error-overlay * Remove duplicate ESLint installation - favour CRA's * Enable old WebAssembly in Webpack 5 * Regenerate dependency tree To resolve the following error: Loading PostCSS "postcss-normalize" plugin failed: Cannot find module 'postcss-normalize' It seems that some dependencies which should be hoisted to the top- level of the dependency tree were previously not. * Force use of React 17 types instead of 18 * Polyfill Node.js core modules Webpack 5 no longer automatically polyfills many of the Node.js modules. As such, we need to pull them in ourselves. * Ignore missing source map warnings for dependencies * Polyfill 'process' for environment variables to work * Polyfill 'buffer' for the application to work in the browser * Move polyfill libraries to dev dependencies * Update test snapshots
NUS-CS1101S · Jul 15, 2023 · 1704770 · 1704770
1 parent 2dd60dd
commit 1704770
Show file tree

Hide file tree

Showing 16 changed files with 6,469 additions and 8,157 deletions.
diff --git a/craco.config.js b/craco.config.js
@@ -1,3 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const webpack = require('webpack');
+
 const cracoConfig = (module.exports = {
   webpack: {
     configure: webpackConfig => {
@@ -19,26 +22,61 @@ const cracoConfig = (module.exports = {
       }
 
       // add rules to pack WASM (for Sourceror)
-      // adapted from https://prestonrichey.com/blog/react-rust-wasm/
       const wasmExtensionRegExp = /\.wasm$/;
       webpackConfig.resolve.extensions.push('.wasm');
       webpackConfig.module.rules.forEach(rule => {
         (rule.oneOf || []).forEach(oneOf => {
-          if (oneOf.loader && oneOf.loader.indexOf('file-loader') >= 0) {
-            // Make file-loader ignore WASM files
+          if (oneOf.type === 'asset/resource') {
             oneOf.exclude.push(wasmExtensionRegExp);
           }
         });
       });
+      // See https://webpack.js.org/configuration/experiments/#experiments.
+      webpackConfig.experiments = {
+        syncWebAssembly: true
+      };
       webpackConfig.output.webassemblyModuleFilename = 'static/[hash].module.wasm';
 
+      // Polyfill Node.js core modules.
+      // An empty implementation (false) is provided when there is no browser equivalent.
+      webpackConfig.resolve.fallback = {
+        'child_process': false,
+        'constants': require.resolve('constants-browserify'),
+        'fs': false,
+        'http': require.resolve('stream-http'),
+        'https': require.resolve('https-browserify'),
+        'os': require.resolve('os-browserify/browser'),
+        'stream': require.resolve('stream-browserify'),
+        'timers': require.resolve('timers-browserify'),
+        'url': require.resolve('url/')
+      };
+
       // workaround .mjs files by Acorn
       webpackConfig.module.rules.push({
         test: /\.mjs$/,
         include: /node_modules/,
         type: 'javascript/auto'
       });
 
+      // Ignore warnings for dependencies that do not ship with a source map.
+      // This is because we cannot do anything about our dependencies.
+      webpackConfig.ignoreWarnings = [{
+        module: /node_modules/,
+        message: /Failed to parse source map/
+      }];
+
+      webpackConfig.plugins = [
+        ...webpackConfig.plugins,
+        // Make environment variables available in the browser by polyfilling the 'process' Node.js module.
+        new webpack.ProvidePlugin({
+          process: 'process/browser',
+        }),
+        // Make the 'buffer' Node.js module available in the browser.
+        new webpack.ProvidePlugin({
+          Buffer: ['buffer', 'Buffer'],
+        })
+      ];
+
       return webpackConfig;
     }
   },

diff --git a/package.json b/package.json
@@ -82,7 +82,7 @@
     "yareco": "^0.1.5"
   },
   "devDependencies": {
-    "@craco/craco": "^6.4.5",
+    "@craco/craco": "^7.1.0",
     "@svgr/webpack": "^6.3.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^14.3.0",
@@ -113,26 +113,34 @@
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "babel-core": "6",
     "babel-runtime": "^6.26.0",
+    "buffer": "^6.0.3",
     "canvas": "^2.9.3",
+    "constants-browserify": "^1.0.0",
     "coveralls": "^3.1.1",
     "cross-env": "^7.0.3",
     "enzyme": "^3.11.0",
-    "eslint": "7",
     "eslint-plugin-simple-import-sort": "^7.0.0",
+    "https-browserify": "^1.0.0",
     "husky": "^8.0.2",
     "npm-run-all": "^4.1.5",
+    "os-browserify": "^0.3.0",
     "prettier": "^2.7.1",
+    "process": "^0.11.10",
     "react-error-overlay": "^6.0.11",
-    "react-scripts": "^4.0.3",
+    "react-scripts": "^5.0.1",
     "react-test-renderer": "^18.2.0",
     "redux-saga-test-plan": "^4.0.6",
     "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.54.0",
-    "typescript": "~4.7.4"
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
+    "timers-browserify": "^2.0.12",
+    "typescript": "~4.7.4",
+    "url": "^0.11.0"
   },
   "resolutions": {
-    "//": "FIXME: Remove this selective dependency resolution (along with the devDependency) once react-scripts is updated past 4.0.3.",
-    "react-error-overlay": "6.0.9"
+    "//": "React 18's types are much stricter and upgrading to it (even if indirectly via a dependency) results in many type errors. FIXME: Remove this after upgrading fully to React 18 and fixing all of the type errors.",
+    "@types/react": "^17.0.38"
   },
   "browserslist": {
     "production": [

diff --git a/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap b/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap
diff --git a/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap b/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap
diff --git a/...editingWorkspaceSideContent/EditingWorkspaceSideContentProgrammingQuestionTemplateTab.tsx b/...editingWorkspaceSideContent/EditingWorkspaceSideContentProgrammingQuestionTemplateTab.tsx
@@ -25,7 +25,7 @@ type StateProps = {
 
 const questionEditorPaths = ['prepend', 'postpend', 'solutionTemplate', 'answer'] as const;
 
-export type QuestionEditorId = typeof questionEditorPaths[number];
+export type QuestionEditorId = (typeof questionEditorPaths)[number];
 
 const QuestionEditorSelect = Select.ofType<QuestionEditor>();
 

diff --git a/src/commons/notificationBadge/__tests__/__snapshots__/NotificationBadge.tsx.snap b/src/commons/notificationBadge/__tests__/__snapshots__/NotificationBadge.tsx.snap
@@ -9,10 +9,10 @@ exports[`Badge does not render with no notifications 1`] = `
           <Blueprint4.ResizeSensor2 targetRef={[Function (anonymous)]} onResize={[Function (anonymous)]}>
             <span aria-haspopup=\\"true\\" className=\\"bp4-popover2-target\\" onBlur={[Function (anonymous)]} onContextMenu={[Function (anonymous)]} onFocus={[Function (anonymous)]} onMouseEnter={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]}>
               <Blueprint4.Tag intent=\\"danger\\" round={true} large={[undefined]} className=\\"\\" disabled={[undefined]} tabIndex={0}>
-                <span disabled={[undefined]} aria-labelledby=\\"tag-1\\" className=\\"bp4-tag bp4-intent-danger bp4-round\\" tabIndex={[undefined]}>
+                <span disabled={[undefined]} className=\\"bp4-tag bp4-intent-danger bp4-round\\" tabIndex={[undefined]}>
                   <Blueprint4.Icon icon={[undefined]} />
-                  <Blueprint4.Text className=\\"bp4-fill\\" ellipsize={true} id=\\"tag-1\\" tagName=\\"span\\" title={[undefined]}>
-                    <span id=\\"tag-1\\" className=\\"bp4-fill bp4-text-overflow-ellipsis\\" title={[undefined]}>
+                  <Blueprint4.Text className=\\"bp4-fill\\" ellipsize={true} tagName=\\"span\\" title={[undefined]}>
+                    <span className=\\"bp4-fill bp4-text-overflow-ellipsis\\" title={[undefined]}>
                       4
                     </span>
                   </Blueprint4.Text>
@@ -40,10 +40,10 @@ exports[`Badge renders properly with notifications 1`] = `
           <Blueprint4.ResizeSensor2 targetRef={[Function (anonymous)]} onResize={[Function (anonymous)]}>
             <span aria-haspopup=\\"true\\" className=\\"bp4-popover2-target\\" onBlur={[Function (anonymous)]} onContextMenu={[Function (anonymous)]} onFocus={[Function (anonymous)]} onMouseEnter={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]}>
               <Blueprint4.Tag intent=\\"danger\\" round={true} large={[undefined]} className=\\"\\" disabled={[undefined]} tabIndex={0}>
-                <span disabled={[undefined]} aria-labelledby=\\"tag-0\\" className=\\"bp4-tag bp4-intent-danger bp4-round\\" tabIndex={[undefined]}>
+                <span disabled={[undefined]} className=\\"bp4-tag bp4-intent-danger bp4-round\\" tabIndex={[undefined]}>
                   <Blueprint4.Icon icon={[undefined]} />
-                  <Blueprint4.Text className=\\"bp4-fill\\" ellipsize={true} id=\\"tag-0\\" tagName=\\"span\\" title={[undefined]}>
-                    <span id=\\"tag-0\\" className=\\"bp4-fill bp4-text-overflow-ellipsis\\" title={[undefined]}>
+                  <Blueprint4.Text className=\\"bp4-fill\\" ellipsize={true} tagName=\\"span\\" title={[undefined]}>
+                    <span className=\\"bp4-fill bp4-text-overflow-ellipsis\\" title={[undefined]}>
                       4
                     </span>
                   </Blueprint4.Text>
@@ -71,10 +71,10 @@ exports[`Badge with filter, filterNotificationsByAssessment renders properly 1`]
           <Blueprint4.ResizeSensor2 targetRef={[Function (anonymous)]} onResize={[Function (anonymous)]}>
             <span aria-haspopup=\\"true\\" className=\\"bp4-popover2-target\\" onBlur={[Function (anonymous)]} onContextMenu={[Function (anonymous)]} onFocus={[Function (anonymous)]} onMouseEnter={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]}>
               <Blueprint4.Tag intent=\\"danger\\" round={true} large={[undefined]} className=\\"\\" disabled={[undefined]} tabIndex={0}>
-                <span disabled={[undefined]} aria-labelledby=\\"tag-2\\" className=\\"bp4-tag bp4-intent-danger bp4-round\\" tabIndex={[undefined]}>
+                <span disabled={[undefined]} className=\\"bp4-tag bp4-intent-danger bp4-round\\" tabIndex={[undefined]}>
                   <Blueprint4.Icon icon={[undefined]} />
-                  <Blueprint4.Text className=\\"bp4-fill\\" ellipsize={true} id=\\"tag-2\\" tagName=\\"span\\" title={[undefined]}>
-                    <span id=\\"tag-2\\" className=\\"bp4-fill bp4-text-overflow-ellipsis\\" title={[undefined]}>
+                  <Blueprint4.Text className=\\"bp4-fill\\" ellipsize={true} tagName=\\"span\\" title={[undefined]}>
+                    <span className=\\"bp4-fill bp4-text-overflow-ellipsis\\" title={[undefined]}>
                       4
                     </span>
                   </Blueprint4.Text>
@@ -102,10 +102,10 @@ exports[`Badge with filter, filterNotificationsByAssessment renders properly 2`]
           <Blueprint4.ResizeSensor2 targetRef={[Function (anonymous)]} onResize={[Function (anonymous)]}>
             <span aria-haspopup=\\"true\\" className=\\"bp4-popover2-target\\" onBlur={[Function (anonymous)]} onContextMenu={[Function (anonymous)]} onFocus={[Function (anonymous)]} onMouseEnter={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]}>
               <Blueprint4.Tag intent=\\"danger\\" round={true} large={[undefined]} className=\\"\\" disabled={[undefined]} tabIndex={0}>
-                <span disabled={[undefined]} aria-labelledby=\\"tag-3\\" className=\\"bp4-tag bp4-intent-danger bp4-round\\" tabIndex={[undefined]}>
+                <span disabled={[undefined]} className=\\"bp4-tag bp4-intent-danger bp4-round\\" tabIndex={[undefined]}>
                   <Blueprint4.Icon icon={[undefined]} />
-                  <Blueprint4.Text className=\\"bp4-fill\\" ellipsize={true} id=\\"tag-3\\" tagName=\\"span\\" title={[undefined]}>
-                    <span id=\\"tag-3\\" className=\\"bp4-fill bp4-text-overflow-ellipsis\\" title={[undefined]}>
+                  <Blueprint4.Text className=\\"bp4-fill\\" ellipsize={true} tagName=\\"span\\" title={[undefined]}>
+                    <span className=\\"bp4-fill bp4-text-overflow-ellipsis\\" title={[undefined]}>
                       4
                     </span>
                   </Blueprint4.Text>