diff --git a/craco.config.js b/craco.config.js index 3d9dba9510..a297df211a 100644 --- 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,19 +22,35 @@ 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$/, @@ -39,6 +58,25 @@ const cracoConfig = (module.exports = { 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 index dc8ff55afe..68352e257d 100644 --- 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 index f3b58b25c2..488fa719d9 100644 --- a/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap +++ b/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap @@ -13,10 +13,10 @@ exports[`Assessment page "loading" content renders correctly 1`] = `