-
Notifications
You must be signed in to change notification settings - Fork 0
[Snyk] Upgrade react from 18.2.0 to 18.3.1 #381
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.
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
base: master
Are you sure you want to change the base?
Conversation
Snyk has created this PR to upgrade react from 18.2.0 to 18.3.1. See this package in npm: react See this project in Snyk: https://app.snyk.io/org/mohammadnewton/project/22edd24b-54ca-4e0b-a30b-3a42f37de584?utm_source=github&utm_medium=referral&page=upgrade-pr
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hello @nejidevelops, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
Summary of Changes
Hello team, gemini-code-assist here to provide a summary of this pull request. This PR, automatically generated by Snyk, aims to upgrade the react
dependency from version 18.2.0
to 18.3.1
. The primary motivation for this upgrade is to address a significant number of security vulnerabilities identified in the current version and its transitive dependencies, including several high and critical severity issues. Additionally, version 18.3.0
includes warnings for deprecated APIs in preparation for the upcoming React 19 release.
Highlights
- Dependency Upgrade: Upgrades the
react
dependency from^18.1.0
(which includes18.2.0
) to^18.3.1
. - Security Fixes: Addresses numerous security vulnerabilities across various dependencies, including high and critical severity issues like ReDoS, DoS, Prototype Pollution, XSS, and more, as detailed in the PR description.
- React 19 Preparation: Includes changes introduced in React 18.3.0, which add warnings for deprecated APIs to help prepare for the React 19 upgrade path.
Changelog
- 0x01-react_intro/task_3/dashboard/package.json
- Updated the
react
dependency version from^18.1.0
to^18.3.1
.
- Updated the
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command>
or @gemini-code-assist <command>
. Below is a summary of the supported commands.
Feature | Command | Description |
---|---|---|
Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/
folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
A version bump arrives,
Fixing bugs, saving lives.
React grows strong,
Where it belongs,
Security thrives.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code Review
This pull request, automatically generated by Snyk, aims to upgrade the react
package from 18.2.0
to 18.3.1
. This is an important update as it addresses numerous security vulnerabilities listed in the PR description, enhancing the overall security of the application.
While the update to react
itself is beneficial, there's a critical consideration regarding its companion package, react-dom
. I've added a specific comment on this in the package.json
file.
Additionally, with any React version upgrade, especially one that introduces new warnings for deprecated APIs (as React 18.3.0 does in preparation for React 19), it's essential to:
- Run all tests thoroughly: Ensure that the upgrade doesn't introduce regressions or break existing functionality. Pay attention to any new console warnings, as they might indicate usage of deprecated patterns that should be updated.
- Verify application behavior: Manually test key user flows in the application.
As a general best practice for projects using React 18, consider migrating from the legacy ReactDOM.render
API to the new createRoot
API for initializing your React application. This is not directly related to the changes in this PR but is important for leveraging React 18's concurrent features and ensuring long-term compatibility. Your src/index.js
file currently uses ReactDOM.render
.
Summary of Findings
- React-DOM Version Mismatch: The
react-dom
package version should be updated to match the newreact
version (^18.3.1
). Currently, it remains at^18.1.0
, which can lead to instability. This was commented on0x01-react_intro/task_3/dashboard/package.json
(line 9). - Need for Thorough Testing: After applying this dependency upgrade, comprehensive testing (unit, integration, E2E) is essential to catch any regressions or issues arising from new warnings or behavioral changes in React 18.3.1.
Merge Readiness
This pull request addresses important security vulnerabilities by upgrading React. This is a valuable change.
However, a high-severity issue has been identified:
- The
react-dom
package version (currently^18.1.0
on line 10 ofpackage.json
) has not been updated to match the newreact
version (^18.3.1
). It is critical to synchronize these versions to prevent potential runtime errors or unexpected behavior.
Additionally, with this React upgrade, it's highly recommended to run all existing tests thoroughly, as React 18.3.x introduces new warnings for deprecated APIs.
Due to the react-dom
version mismatch, I recommend that this issue be addressed before merging the pull request. As I am an AI assistant, I am unable to approve pull requests. Please ensure this change is made and further reviewed and approved by a team member before merging.
@@ -6,7 +6,7 @@ | |||
"@testing-library/jest-dom": "^5.16.4", | |||
"@testing-library/react": "^13.1.1", | |||
"@testing-library/user-event": "^13.5.0", | |||
"react": "^18.1.0", | |||
"react": "^18.3.1", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This upgrade to React ^18.3.1
is a good step for security! However, it's crucial to keep the react
and react-dom
package versions synchronized.
Currently, react-dom
(on line 10 of this file) is specified as ^18.1.0
. After this change, react
will be ^18.3.1
.
This version mismatch can lead to subtle runtime errors, unexpected behavior, or breakages, as these two packages are designed to work closely together.
Could you please also update the react-dom
dependency on line 10 to ^18.3.1
to match the react
version? This will help ensure stability and proper functioning of your React application.
Snyk has created this PR to upgrade react from 18.2.0 to 18.3.1.
ℹ️ Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.
The recommended version is 388 versions ahead of your current version.
The recommended version was released a year ago.
Issues fixed by the recommended upgrade:
SNYK-JS-ANSIHTML-1296849
SNYK-JS-ANSIREGEX-1583908
SNYK-JS-WS-7266574
SNYK-JS-BRACES-6838727
SNYK-JS-BRACES-6838727
SNYK-JS-BRACES-6838727
SNYK-JS-BROWSERIFYSIGN-6037026
SNYK-JS-CROSSSPAWN-8303230
SNYK-JS-BODYPARSER-7926860
SNYK-JS-SERIALIZEJAVASCRIPT-536840
SNYK-JS-SERIALIZEJAVASCRIPT-570062
SNYK-JS-SERIALIZEJAVASCRIPT-6056521
SNYK-JS-SHELLQUOTE-1766506
SNYK-JS-SSRI-1246392
SNYK-JS-UNSETVALUE-2400660
SNYK-JS-WEBPACKDEVMIDDLEWARE-6476555
SNYK-JS-WS-7266574
SNYK-JS-HTTPPROXYMIDDLEWARE-8229906
SNYK-JS-IP-6240864
SNYK-JS-ELLIPTIC-8172694
SNYK-JS-FOLLOWREDIRECTS-6141137
SNYK-JS-LOADERUTILS-3043105
SNYK-JS-LODASHTEMPLATE-1088054
SNYK-JS-MERGE-1040469
SNYK-JS-MERGE-1042987
SNYK-JS-MICROMATCH-6838728
SNYK-JS-MICROMATCH-6838728
SNYK-JS-MICROMATCH-6838728
SNYK-JS-NODEFORGE-2430339
SNYK-JS-NODEFORGE-2430341
SNYK-JS-PATHTOREGEXP-7925106
SNYK-JS-PATHTOREGEXP-8482416
SNYK-JS-BROWSERSLIST-1090194
SNYK-JS-COOKIE-8163060
SNYK-JS-YARGSPARSER-560381
SNYK-JS-YARGSPARSER-560381
SNYK-JS-POSTCSS-1255640
SNYK-JS-PROMPTS-1729737
SNYK-JS-REACTDEVUTILS-1083268
SNYK-JS-REQUEST-3361831
SNYK-JS-TERSER-2806366
SNYK-JS-TOUGHCOOKIE-5672873
npm:braces:20180219
SNYK-JS-BABELTRAVERSE-5962462
SNYK-JS-BABELTRAVERSE-5962463
SNYK-JS-ELLIPTIC-7577916
SNYK-JS-ELLIPTIC-7577917
SNYK-JS-SOCKJS-575261
SNYK-JS-TOUGHCOOKIE-5672873
SNYK-JS-UGLIFYJS-1727251
SNYK-JS-WEBPACK-7840298
SNYK-JS-IP-7148531
SNYK-JS-JSON5-3182856
SNYK-JS-SEND-7926862
SNYK-JS-WORDWRAP-3149973
SNYK-JS-ELLIPTIC-7577918
SNYK-JS-ELLIPTIC-8187303
SNYK-JS-ELLIPTIC-8720086
SNYK-JS-EXPRESS-6474509
SNYK-JS-EXPRESS-7926867
SNYK-JS-FOLLOWREDIRECTS-6444610
SNYK-JS-GLOBPARENT-1016905
SNYK-JS-HTMLMINIFIER-3091181
SNYK-JS-ISTANBULREPORTS-2328088
SNYK-JS-LOADERUTILS-3042992
SNYK-JS-LOADERUTILS-3105943
SNYK-JS-MINIMATCH-3050818
SNYK-JS-NODEFORGE-2330875
SNYK-JS-NODEFORGE-2331908
SNYK-JS-NODEFORGE-2430337
SNYK-JS-SERVESTATIC-7926865
Release notes
Package name: react
act
fromreact
f1338fThis release is identical to 18.2 but adds warnings for deprecated APIs and other changes that are needed for React 19.
Read the React 19 Upgrade Guide for more info.
React
this.refs
to support string ref codemod 909071findDOMNode
outside StrictMode c3b283test-utils
methods d4ea75defaultProps
for function components #25699key
#25697act
fromtest-utils
d4ea75React DOM
unmountComponentAtNode
8a015brenderToStaticNodeStream
#28874React DOM
onRecoverableError
. (@ gnoff in #24591)document
causing a blank page on mismatch. (@ gnoff in #24523)setState
in Safari when adding an iframe. (@ gaearon in #24459)React DOM Server
<title>
elements to match the browser constraints. (@ gnoff in #24679)highWaterMark
to0
. (@ jplhomer in #24641)Server Components (Experimental)
useId()
inside Server Components. (@ gnoff) in #24172Important
Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.
For more information:
[//]: # 'snyk:metadata:{"customTemplate":{"variablesUsed":[],"fieldsUsed":[]},"dependencies":[{"name":"react","from":"18.2.0","to":"18.3.1"}],"env":"prod","hasFixes":true,"isBreakingChange":false,"isMajorUpgrade":false,"issuesToFix":["SNYK-JS-ANSIHTML-1296849","SNYK-JS-ANSIREGEX-1583908","SNYK-JS-WS-7266574","SNYK-JS-BRACES-6838727","SNYK-JS-BRACES-6838727","SNYK-JS-BRACES-6838727","SNYK-JS-BROWSERIFYSIGN-6037026","SNYK-JS-CROSSSPAWN-8303230","SNYK-JS-BODYPARSER-7926860","SNYK-JS-SERIALIZEJAVASCRIPT-536840","SNYK-JS-SERIALIZEJAVASCRIPT-570062","SNYK-JS-SERIALIZEJAVASCRIPT-6056521","SNYK-JS-SHELLQUOTE-1766506","SNYK-JS-SSRI-1246392","SNYK-JS-UNSETVALUE-2400660","SNYK-JS-WEBPACKDEVMIDDLEWARE-6476555","SNYK-JS-WS-7266574","SNYK-JS-HTTPPROXYMIDDLEWARE-8229906","SNYK-JS-IP-6240864","SNYK-JS-ELLIPTIC-8172694","SNYK-JS-FOLLOWREDIRECTS-6141137","SNYK-JS-LOADERUTILS-3043105","SNYK-JS-LODASHTEMPLATE-1088054","SNYK-JS-MERGE-1040469","SNYK-JS-MERGE-1042987","SNYK-JS-MICROMATCH-6838728","SNYK-JS-MICROMATCH-6838728","SNYK-JS-MICROMATCH-6838728","SNYK-JS-NODEFORGE-2430339","SNYK-JS-NODEFORGE-2430341","SNYK-JS-PATHTOREGEXP-7925106","SNYK-JS-PATHTOREGEXP-8482416","SNYK-JS-BROWSERSLIST-1090194","SNYK-JS-COOKIE-8163060","SNYK-JS-YARGSPARSER-560381","SNYK-JS-YARGSPARSER-560381","SNYK-JS-POSTCSS-1255640","SNYK-JS-PROMPTS-1729737","SNYK-JS-REACTDEVUTILS-1083268","SNYK-JS-REQUEST-3361831","SNYK-JS-TERSER-2806366","SNYK-JS-TOUGHCOOKIE-5672873","npm:braces:20180219","SNYK-JS-BABELTRAVERSE-5962462","SNYK-JS-BABELTRAVERSE-5962463","SNYK-JS-ELLIPTIC-7577916","SNYK-JS-ELLIPTIC-7577917","SNYK-JS-SOCKJS-575261","SNYK-JS-TOUGHCOOKIE-5672873","SNYK-JS-UGLIFYJS-1727251","SNYK-JS-WEBPACK-7840298","SNYK-JS-IP-7148531","SNYK-JS-JSON5-3182856","SNYK-JS-SEND-7926862","SNYK-JS-WORDWRAP-3149973","SNYK-JS-ELLIPTIC-7577918","SNYK-JS-ELLIPTIC-8187303","SNYK-JS-ELLIPTIC-8720086","SNYK-JS-EXPRESS-6474509","SNYK-JS-EXPRESS-7926867","SNYK-JS-FOLLOWREDIRECTS-6444610","SNYK-JS-GLOBPARENT-1016905","SNYK-JS-HTMLMINIFIER-3091181","SNYK-JS-ISTANBULREPORTS-2328088","SNYK-JS-LOADERUTILS-3042992","SNYK-JS-LOADERUTILS-3105943","SNYK-JS-MINIMATCH-3050818","SNYK-JS-NODEFORGE-2330875","SNYK-JS-NODEFORGE-2331908","SNYK-JS-NODEFORGE-2430337","SNYK-JS-SERVESTATIC-7926865"],"prId":"e96db003-42c2-4d9f-b662-f33b8a57114d","prPublicId":"e96db003-42c2-4d9f-b662-f33b8a57114d","packageManager":"npm","priorityScoreList":[696,696,696,696,589,756,410,619,706,619,619,696,589,477,542,751,629,472,589,681,589,686,589,365,280,452,452,586,315,601,586,372,601,646,265,646,506,786,786,776,776,586,479,402,646,641,105,506,776,786,771,305,255,432,586,586,429,265,265,265,372,315,280,105],"projectPublicId":"22edd24b-54ca-4e0b-a30b-3a42f37de584","projectUrl":"https://app.snyk.io/org/mohammadnewton/project/22edd24b-54ca-4e0b-a30b-3a42f37de584?utm_source=github&utm_medium=referral&page=upgrade-pr","prType":"upgrade","templateFieldSources":{"branchName":"default","commitMessage":"default","description":"default","title":"default"},"templateVariants":["priorityScore"],"type":"auto","upgrade":["SNYK-JS-ANSIHTML-1296849","SNYK-JS-ANSIREGEX-1583908","SNYK-JS-WS-7266574","SNYK-JS-BRACES-6838727","SNYK-JS-BRACES-6838727","SNYK-JS-BRACES-6838727","SNYK-JS-BROWSERIFYSIGN-6037026","SNYK-JS-CROSSSPAWN-8303230","SNYK-JS-BODYPARSER-7926860","SNYK-JS-SERIALIZEJAVASCRIPT-536840","SNYK-JS-SERIALIZEJAVASCRIPT-570062","SNYK-JS-SERIALIZEJAVASCRIPT-6056521","SNYK-JS-SHELLQUOTE-1766506","SNYK-JS-SSRI-1246392","SNYK-JS-UNSETVALUE-2400660","SNYK-JS-WEBPACKDEVMIDDLEWARE-6476555","SNYK-JS-WS-7266574","SNYK-JS-HTTPPROXYMIDDLEWARE-8229906","SNYK-JS-IP-6240864","SNYK-JS-ELLIPTIC-8172694","SNYK-JS-FOLLOWREDIRECTS-6141137","SNYK-JS-LOADERUTILS-3043105","SNYK-JS-LODASHTEMPLATE-1088054","SNYK-JS-MERGE-1040469","SNYK-JS-MERGE-1042987","SNYK-JS-MICROMATCH-6838728","SNYK-JS-MICROMATCH-6838728","SNYK-JS-MICROMATCH-6838728","SNYK-JS-NODEFORGE-2430339","SNYK-JS-NODEFORGE-24303...