-
Notifications
You must be signed in to change notification settings - Fork 0
[Snyk] Upgrade react-dom from 18.2.0 to 18.3.1 #402
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-dom from 18.2.0 to 18.3.1. See this package in npm: react-dom 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.
Summary of Changes
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!
This pull request, automatically generated by Snyk, updates the react-dom
dependency in package.json
from ^18.1.0
to ^18.3.1
. While the PR title indicates an upgrade from 18.2.0
, the change in the manifest reflects the update from the 18.1.x
range to the 18.3.x
range. The primary purpose of this upgrade is to resolve a significant number of identified security vulnerabilities and to incorporate warnings for deprecated React APIs, paving the way for future compatibility with React 19.
Highlights
- Dependency Version Update: The
react-dom
dependency inpackage.json
has been updated from^18.1.0
to^18.3.1
. - Security Vulnerability Resolution: This upgrade addresses numerous security vulnerabilities across critical, high, medium, and low severities, as identified by Snyk, improving the project's overall security posture.
- React 19 Compatibility Preparations: The new
react-dom
version introduces warnings for deprecated APIs in bothreact
andreact-dom
(e.g.,findDOMNode
,test-utils
methods, legacy context, string refs,defaultProps
for function components, spreadingkey
,act
fromtest-utils
,unmountComponentAtNode
,renderToStaticNodeStream
), which are crucial steps for migration to React 19.
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.
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, upgrades react-dom
to version 18.3.1
to patch several security vulnerabilities. This is an important update.
My main feedback is to also upgrade the react
package to match the new react-dom
version (^18.3.1
). Keeping these two packages in sync is important to prevent runtime errors. I've added a comment on package.json
with this recommendation.
Additionally, please be aware that React 18 deprecates the ReactDOM.render
API, which is used in src/index.js
. After this upgrade, you will likely see warnings in the browser console. It's recommended to migrate to the new createRoot
API to resolve these warnings.
@@ -7,7 +7,7 @@ | |||
"@testing-library/react": "^13.1.1", | |||
"@testing-library/user-event": "^13.5.0", | |||
"react": "^18.1.0", | |||
"react-dom": "^18.1.0", | |||
"react-dom": "^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.
It's crucial to keep react
and react-dom
versions synchronized to avoid potential issues. While react-dom
is being upgraded to 18.3.1
, the react
package on the preceding line remains at ^18.1.0
.
To prevent compatibility problems, please upgrade the react
package to match the react-dom
version. You should change line 9 to:
"react": "^18.3.1",
Snyk has created this PR to upgrade react-dom 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-HTTPPROXYMIDDLEWARE-8229906
SNYK-JS-BODYPARSER-7926860
SNYK-JS-HTMLMINIFIER-3091181
SNYK-JS-BABELTRAVERSE-5962462
SNYK-JS-BABELTRAVERSE-5962463
SNYK-JS-IP-6240864
SNYK-JS-LOADERUTILS-3043105
SNYK-JS-NODEFORGE-2430339
SNYK-JS-WS-7266574
SNYK-JS-WS-7266574
SNYK-JS-SERIALIZEJAVASCRIPT-570062
SNYK-JS-SERIALIZEJAVASCRIPT-6056521
SNYK-JS-SHELLQUOTE-1766506
SNYK-JS-ELLIPTIC-8172694
SNYK-JS-IP-7148531
SNYK-JS-ISTANBULREPORTS-2328088
SNYK-JS-JSON5-3182856
SNYK-JS-LOADERUTILS-3042992
SNYK-JS-LOADERUTILS-3105943
SNYK-JS-NODEFORGE-2430341
SNYK-JS-PATHTOREGEXP-7925106
SNYK-JS-PATHTOREGEXP-8482416
SNYK-JS-POSTCSS-1255640
SNYK-JS-PROMPTS-1729737
SNYK-JS-REACTDEVUTILS-1083268
SNYK-JS-YARGSPARSER-560381
SNYK-JS-YARGSPARSER-560381
SNYK-JS-WORDWRAP-3149973
SNYK-JS-SERVESTATIC-7926865
SNYK-JS-ELLIPTIC-7577917
SNYK-JS-ELLIPTIC-7577918
SNYK-JS-ELLIPTIC-8187303
SNYK-JS-ELLIPTIC-8720086
SNYK-JS-FOLLOWREDIRECTS-6141137
SNYK-JS-MERGE-1040469
SNYK-JS-MERGE-1042987
SNYK-JS-MICROMATCH-6838728
SNYK-JS-MICROMATCH-6838728
SNYK-JS-MICROMATCH-6838728
SNYK-JS-UNSETVALUE-2400660
SNYK-JS-WEBPACKDEVMIDDLEWARE-6476555
SNYK-JS-BRACES-6838727
SNYK-JS-BRACES-6838727
SNYK-JS-BRACES-6838727
SNYK-JS-BROWSERIFYSIGN-6037026
SNYK-JS-CROSSSPAWN-8303230
SNYK-JS-SERIALIZEJAVASCRIPT-536840
SNYK-JS-LODASHTEMPLATE-1088054
SNYK-JS-SSRI-1246392
SNYK-JS-EXPRESS-6474509
SNYK-JS-EXPRESS-7926867
SNYK-JS-FOLLOWREDIRECTS-6444610
SNYK-JS-GLOBPARENT-1016905
SNYK-JS-MINIMATCH-3050818
SNYK-JS-NODEFORGE-2330875
SNYK-JS-NODEFORGE-2331908
SNYK-JS-NODEFORGE-2430337
SNYK-JS-UGLIFYJS-1727251
SNYK-JS-WEBPACK-7840298
SNYK-JS-BROWSERSLIST-1090194
SNYK-JS-COOKIE-8163060
npm:braces:20180219
SNYK-JS-ELLIPTIC-7577916
SNYK-JS-REQUEST-3361831
SNYK-JS-SOCKJS-575261
SNYK-JS-TERSER-2806366
SNYK-JS-TOUGHCOOKIE-5672873
SNYK-JS-TOUGHCOOKIE-5672873
SNYK-JS-SEND-7926862
Release notes
Package name: react-dom
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-dom","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-HTTPPROXYMIDDLEWARE-8229906","SNYK-JS-BODYPARSER-7926860","SNYK-JS-HTMLMINIFIER-3091181","SNYK-JS-BABELTRAVERSE-5962462","SNYK-JS-BABELTRAVERSE-5962463","SNYK-JS-IP-6240864","SNYK-JS-LOADERUTILS-3043105","SNYK-JS-NODEFORGE-2430339","SNYK-JS-WS-7266574","SNYK-JS-WS-7266574","SNYK-JS-SERIALIZEJAVASCRIPT-570062","SNYK-JS-SERIALIZEJAVASCRIPT-6056521","SNYK-JS-SHELLQUOTE-1766506","SNYK-JS-ELLIPTIC-8172694","SNYK-JS-IP-7148531","SNYK-JS-ISTANBULREPORTS-2328088","SNYK-JS-JSON5-3182856","SNYK-JS-LOADERUTILS-3042992","SNYK-JS-LOADERUTILS-3105943","SNYK-JS-NODEFORGE-2430341","SNYK-JS-PATHTOREGEXP-7925106","SNYK-JS-PATHTOREGEXP-8482416","SNYK-JS-POSTCSS-1255640","SNYK-JS-PROMPTS-1729737","SNYK-JS-REACTDEVUTILS-1083268","SNYK-JS-YARGSPARSER-560381","SNYK-JS-YARGSPARSER-560381","SNYK-JS-WORDWRAP-3149973","SNYK-JS-SERVESTATIC-7926865","SNYK-JS-ELLIPTIC-7577917","SNYK-JS-ELLIPTIC-7577918","SNYK-JS-ELLIPTIC-8187303","SNYK-JS-ELLIPTIC-8720086","SNYK-JS-FOLLOWREDIRECTS-6141137","SNYK-JS-MERGE-1040469","SNYK-JS-MERGE-1042987","SNYK-JS-MICROMATCH-6838728","SNYK-JS-MICROMATCH-6838728","SNYK-JS-MICROMATCH-6838728","SNYK-JS-UNSETVALUE-2400660","SNYK-JS-WEBPACKDEVMIDDLEWARE-6476555","SNYK-JS-BRACES-6838727","SNYK-JS-BRACES-6838727","SNYK-JS-BRACES-6838727","SNYK-JS-BROWSERIFYSIGN-6037026","SNYK-JS-CROSSSPAWN-8303230","SNYK-JS-SERIALIZEJAVASCRIPT-536840","SNYK-JS-LODASHTEMPLATE-1088054","SNYK-JS-SSRI-1246392","SNYK-JS-EXPRESS-6474509","SNYK-JS-EXPRESS-7926867","SNYK-JS-FOLLOWREDIRECTS-6444610","SNYK-JS-GLOBPARENT-1016905","SNYK-JS-MINIMATCH-3050818","SNYK-JS-NODEFORGE-2330875","SNYK-JS-NODEFORGE-2331908","SNYK-JS-NODEFORGE-2430337","SNYK-JS-UGLIFYJS-1727251","SNYK-JS-WEBPACK-7840298","SNYK-JS-BROWSERSLIST-1090194","SNYK-JS-COOKIE-8163060","npm:braces:20180219","SNYK-JS-ELLIPTIC-7577916","SNYK-JS-REQUEST-3361831","SNYK-JS-SOCKJS-575261","SNYK-JS-TERSER-2806366","SNYK-JS-TOUGHCOOKIE-5672873","SNYK-JS-TOUGHCOOKIE-5672873","SNYK-JS-SEND-7926862"],"prId":"a4811139-1a5d-4b3e-bb17-c4cf75df0307","prPublicId":"a4811139-1a5d-4b3e-bb17-c4cf75df0307","packageManager":"npm","priorityScoreList":[696,696,542,410,586,786,786,751,589,365,696,706,619,619,629,646,429,641,265,265,280,452,452,586,372,601,601,506,105,776,776,786,771,472,589,686,589,589,477,696,589,756,619,681,696,305,255,432,586,265,372,315,280,479,402,586,315,506,776,646,586,265,646,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-HTTPPROXYMIDDLEWARE-8229906","SNYK-JS-BODYPARSER-7926860","SNYK-JS-HTMLMINIFIER-3091181","SNYK-JS-BABELTRAVERSE-5962462","SNYK-JS-BABELTRAVERSE-5962463","SNYK-JS-IP-6240864","SNYK-JS-LOADERUTILS-3043105","SNYK-JS-NODEFORGE-2430339","SNYK-JS-WS-7266574","SNYK-JS-WS-7266574","SNYK-JS-SERIALIZEJAVASCRIPT-570062","SNYK-JS-SERIALIZEJAVASCRIPT-6056521","SNYK-JS-SHELLQUOTE-1766506","SNYK-JS-ELLIPTIC-8172694","SNYK-JS-IP-7148531","SNYK-JS-ISTANBULREPORTS-2328088","SNYK-JS-JSON5-3182856","SNYK-JS-LOADERUTILS-3042992","SNYK-JS-LOADERUTILS-3105943","SNYK-JS-NODEFORGE-2430341","SNYK-JS-PATHTOREGEXP-7925106","SNYK-JS-PATHTOREGEXP-8482416","SNYK-JS-POSTCSS-1255640","SNYK-JS-PROMPTS-1729737","SNYK-JS-REACTDEVUTILS-1083268","SNYK-JS-YARGSPARSER-560381","SNYK-JS-YARGSPARSER-560381","SNYK...