Skip to content

Upgrade CRACO to v7.1.0 & react-scripts to v5.0.1 #2376

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
Mar 23, 2023
Merged

Upgrade CRACO to v7.1.0 & react-scripts to v5.0.1 #2376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
b4c7714
Update CRACO from v6.4.5 to v7.1.0
ianyong Mar 12, 2023
dda38cf
Update react-scripts from v4.0.3 to v5.0.1
ianyong Mar 12, 2023
a2de210
Remove selective dependency resolution of react-error-overlay
ianyong Mar 12, 2023
6c42838
Remove duplicate ESLint installation - favour CRA's
ianyong Mar 12, 2023
5d5663e
Enable old WebAssembly in Webpack 5
ianyong Mar 12, 2023
ca7f8de
Regenerate dependency tree
ianyong Mar 12, 2023
37d7bb3
Force use of React 17 types instead of 18
ianyong Mar 12, 2023
29fbfdc
Polyfill Node.js core modules
ianyong Mar 12, 2023
58126d7
Ignore missing source map warnings for dependencies
ianyong Mar 12, 2023
8116eea
Polyfill 'process' for environment variables to work
ianyong Mar 12, 2023
0ea6fd8
Polyfill 'buffer' for the application to work in the browser
ianyong Mar 12, 2023
a5bba33
Move polyfill libraries to dev dependencies
ianyong Mar 12, 2023
32c6f1e
Update test snapshots
ianyong Mar 12, 2023
6982c11
Merge branch 'master' into upgrade-craco-and-react-scripts
ianyong Mar 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 41 additions & 3 deletions craco.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
// eslint-disable-next-line @typescript-eslint/no-var-requires
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We cannot use ES6 imports for config files.

const webpack = require('webpack');

const cracoConfig = (module.exports = {
webpack: {
configure: webpackConfig => {
Expand All @@ -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/')
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The trailing slash was part of the instructions given by Webpack. I'm not very sure if removing it will cause any errors.

};

// 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;
}
},
Expand Down
20 changes: 14 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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": [
Expand Down
240 changes: 120 additions & 120 deletions src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

556 changes: 278 additions & 278 deletions src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion ...editingWorkspaceSideContent/EditingWorkspaceSideContentProgrammingQuestionTemplateTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>();

Expand Down
24 changes: 12 additions & 12 deletions src/commons/notificationBadge/__tests__/__snapshots__/NotificationBadge.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
Loading