Upgrade CRACO to v7.1.0 & react-scripts to v5.0.1 #2376
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
Webpack 5 no longer automatically polyfills many of the Node.js modules. As such, we need to pull them in ourselves.
ianyong
commented
Mar 12, 2023
| @@ -1,3 +1,6 @@ | |||
| // eslint-disable-next-line @typescript-eslint/no-var-requires | |||
There was a problem hiding this comment.
We cannot use ES6 imports for config files.
ianyong
commented
Mar 12, 2023
| 'os': require.resolve('os-browserify/browser'), | ||
| 'stream': require.resolve('stream-browserify'), | ||
| 'timers': require.resolve('timers-browserify'), | ||
| 'url': require.resolve('url/') |
There was a problem hiding this comment.
The trailing slash was part of the instructions given by Webpack. I'm not very sure if removing it will cause any errors.
Pull Request Test Coverage Report for Build 4496740579Warning: This coverage report may be inaccurate.This pull request's base commit is no longer the HEAD commit of its target branch. This means it includes changes from outside the original pull request, including, potentially, unrelated coverage changes.
Details
💛 - Coveralls |
ianyong
force-pushed
the
upgrade-craco-and-react-scripts
branch
from
7ebaf50 to
6982c11
Compare
RichDom2185
pushed a commit
to NUS-CS1101S/cadet-frontend
that referenced
this pull request
Jul 15, 2023
* 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
We are upgrading
react-scriptsto v5 so that it can be used with Node.js 18. This is because Node.js 16 is reaching end of life this September.Changes:
react-scriptsfrom v4.0.3 to v5.0.1.react-error-overlay.react-scriptsbeing updated. See Fix error & injection of iframe on hot reload #2214 for more information.react-script's version to prevent conflicts in configuration.syncWebAssemblyoption for Webpack 5.yarn.lockand regenerated it).react-scriptscaused a lot of changes in dependencies. Some of these dependencies need to be hoisted to the top-level of the dependency tree to work, but were not.@types/reactto use v17 instead of v18.node_modulesdirectory.processandbufferpolyfills as plugins.processis needed for environment variables to work as if they were being used in a Node.js environment (i.e., all of theprocess.env.ENV_VARthat are being used in the codebase).bufferis needed for some of our dependencies.Resolves #2313. Fully fixes #2213.
Type of change
How to test
There should be no change in behaviour.