chore: update @packages/reporter react from 16.8.6 to 17.0.2 and updates @types/react* packages from 16x to 17x (#30516)

* chore: update @packages/reporter react from 16.8.6  to 17.0.2  and updates @types/react* packages from 16x to 17x [run ci]

* hoist dependencies up due to peer dep issues with react and the runner/reporter needing to locate the same react (this is dumb)

* update react-18 package to reference types delcared in root (kind of goofy but existing pattern) [run ci]

* correctly look up react instance as __reactInternalInstance no longer exists in react17 [run ci]

* fix failing test now that repo is on react 17 [run ci]

Author: AtofStryker

cli/CHANGELOG.md

@@ -13,6 +13,7 @@ _Released 11/5/2024_
 
 **Dependency Updates:**
 
+- Updated `react` from `16.8.6` to `17.0.2` and `react-dom` from `16.8.6` to `17.0.2`. Addresses [#30510](https://github.com/cypress-io/cypress/issues/30510).
 - Updated `mobx` from `5.15.4` to `6.13.5` and `mobx-react` from `6.1.8` to `9.1.1`. Addresses [#30509](https://github.com/cypress-io/cypress/issues/30509).
 - Updated `@cypress/request` from `3.0.4` to `3.0.6`. Addressed in [#30488](https://github.com/cypress-io/cypress/pull/30488).
 

npm/react/cypress/component/basic/rerender/effects.cy.jsx

@@ -62,7 +62,12 @@ it('should run unmount effect cleanup when unmounting', () => {
 
     cy
     .then(() => ReactDom.unmountComponentAtNode(getContainerEl()))
-    .then(() => {
+    .then(async () => {
+      // does not call useEffect in react 17 unmount synchronously.
+      // @see https://github.com/facebook/react/issues/20263
+      // to keep this test working, we need to flush the microtask queue.
+      await new Promise((r) => setTimeout(r))
+
       expect(layoutEffectCleanup).to.have.been.callCount(1)
       expect(effectCleanup).to.have.been.callCount(1)
     })

npm/react/package.json

@@ -22,10 +22,10 @@
     "axios": "0.21.2",
     "cypress": "0.0.0-development",
     "prop-types": "15.7.2",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
-    "react-router": "6.0.0-alpha.1",
-    "react-router-dom": "6.0.0-alpha.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-router": "6.10.0",
+    "react-router-dom": "6.10.0",
     "semver": "^7.5.3",
     "typescript": "~5.4.5",
     "vite": "5.2.11",

npm/react18/package.json

@@ -15,11 +15,11 @@
     "@cypress/react": "0.0.0-development",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.1.1",
-    "@types/react": "^16",
-    "@types/react-dom": "^16",
+    "@types/react": "17.0.83",
+    "@types/react-dom": "17.0.25",
     "cypress": "0.0.0-development",
-    "react": "^16",
-    "react-dom": "^16",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "rollup": "3.7.3",
     "rollup-plugin-typescript2": "^0.29.0",
     "typescript": "~5.4.5"

package.json

@@ -112,8 +112,8 @@
     "@types/mocha": "8.0.3",
     "@types/node": "18.17.5",
     "@types/prismjs": "1.16.0",
-    "@types/react": "16.9.50",
-    "@types/react-dom": "16.9.8",
+    "@types/react": "17.0.83",
+    "@types/react-dom": "17.0.25",
     "@types/request-promise": "4.1.45",
     "@types/send": "^0.17.1",
     "@types/sinon-chai": "3.2.3",
@@ -175,6 +175,8 @@
     "listr2": "3.8.3",
     "lodash": "^4.17.21",
     "minimist": "1.2.8",
+    "mobx": "6.13.5",
+    "mobx-react": "9.1.1",
     "mocha": "3.5.3",
     "mocha-banner": "1.1.2",
     "mocha-junit-reporter": "2.2.0",
@@ -187,6 +189,8 @@
     "pluralize": "8.0.0",
     "print-arch": "1.0.0",
     "proxyquire": "2.1.3",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
     "rimraf": "5.0.10",
     "semantic-release": "22.0.12",
     "semantic-release-monorepo": "8.0.2",
@@ -263,7 +267,6 @@
   "resolutions": {
     "**/@types/cheerio": "0.22.21",
     "**/@types/enzyme": "3.10.5",
-    "**/@types/react": "16.9.50",
     "**/@wdio/logger": "9.0.0",
     "**/jquery": "3.4.1",
     "**/pretty-format": "26.4.0",

packages/app/package.json

@@ -58,7 +58,6 @@
     "javascript-time-ago": "2.3.8",
     "just-my-luck": "3.0.0",
     "lodash": "4.17.21",
-    "mobx": "6.13.5",
     "nanoid": "3.3.4",
     "pinia": "2.0.0-rc.14",
     "rollup-plugin-copy": "3.4.0",

packages/driver/cypress/support/utils.ts

@@ -10,7 +10,7 @@ export const getCommandLogWithText = (command, type = 'method') => {
 }
 
 export const findReactInstance = function (dom) {
-  let key = _.keys(dom).find((key) => key.startsWith('__reactInternalInstance$')) as string
+  let key = _.keys(dom).find((key) => key.startsWith('__reactFiber')) as string
   let internalInstance = dom[key]
 
   if (internalInstance == null) return null

packages/reporter/package.json

@@ -27,12 +27,8 @@
     "cypress-real-events": "1.6.0",
     "lodash": "^4.17.21",
     "markdown-it": "^14.0.0",
-    "mobx": "6.13.5",
-    "mobx-react": "9.1.1",
     "prismjs": "1.27.0",
     "prop-types": "15.7.2",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
     "sinon": "7.5.0",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4"

packages/reporter/webpack.config.ts

@@ -32,8 +32,6 @@ config.resolve = {
   ...config.resolve,
   alias: {
     'lodash': require.resolve('lodash'),
-    'react': require.resolve('react'),
-    'react-dom': require.resolve('react-dom'),
   },
 }
 

packages/runner/webpack.config.ts

@@ -38,8 +38,6 @@ mainConfig.resolve = {
   alias: {
     'bluebird': require.resolve('bluebird'),
     'lodash': require.resolve('lodash'),
-    'react': require.resolve('react'),
-    'react-dom': require.resolve('react-dom'),
   },
 }
 

yarn.lock

@@ -2548,7 +2548,7 @@
     core-js-pure "^3.0.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.18.9", "@babel/runtime@^7.25.0", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.18.9", "@babel/runtime@^7.25.0", "@babel/runtime@^7.8.4":
   version "7.25.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.0.tgz#3af9a91c1b739c569d5d80cc917280919c544ecb"
   integrity sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==
@@ -8018,26 +8018,20 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.3.tgz#7ee330ba7caafb98090bece86a5ee44115904c2c"
   integrity sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA==
 
-"@types/react-dom@16.9.8":
-  version "16.9.8"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.8.tgz#fe4c1e11dfc67155733dfa6aa65108b4971cb423"
-  integrity sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA==
+"@types/react-dom@17.0.25":
+  version "17.0.25"
+  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.25.tgz#e0e5b3571e1069625b3a3da2b279379aa33a0cb5"
+  integrity sha512-urx7A7UxkZQmThYA4So0NelOVjx3V4rNFVJwp0WZlbIK5eM4rNJDiN3R/E9ix0MBh6kAEojk/9YL+Te6D9zHNA==
   dependencies:
-    "@types/react" "*"
-
-"@types/react-dom@^16":
-  version "16.9.16"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.16.tgz#c591f2ed1c6f32e9759dfa6eb4abfd8041f29e39"
-  integrity sha512-Oqc0RY4fggGA3ltEgyPLc3IV9T73IGoWjkONbsyJ3ZBn+UPPCYpU2ec0i3cEbJuEdZtkqcCF2l1zf2pBdgUGSg==
-  dependencies:
-    "@types/react" "^16"
+    "@types/react" "^17"
 
-"@types/react@*", "@types/react@16.9.50", "@types/react@^16":
-  version "16.9.50"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.50.tgz#cb5f2c22d42de33ca1f5efc6a0959feb784a3a2d"
-  integrity sha512-kPx5YsNnKDJejTk1P+lqThwxN2PczrocwsvqXnjvVvKpFescoY62ZiM3TV7dH1T8lFhlHZF+PE5xUyimUwqEGA==
+"@types/react@*", "@types/react@17.0.83", "@types/react@^17":
+  version "17.0.83"
+  resolved "https://registry.npmjs.org/@types/react/-/react-17.0.83.tgz#b477c56387b74279281149dcf5ba2a1e2216d131"
+  integrity sha512-l0m4ArKJvmFtR4e8UmKrj1pB4tUgOhJITf+mADyF/p69Ts1YAR/E+G9XEM0mHXKVRa1dQNHseyyDNzeuAXfXQw==
   dependencies:
     "@types/prop-types" "*"
+    "@types/scheduler" "^0.16"
     csstype "^3.0.2"
 
 "@types/[email protected]":
@@ -8090,6 +8084,11 @@
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.2.tgz#ed279a64fa438bb69f2480eda44937912bb7480a"
   integrity sha512-XISRgDJ2Tc5q4TRqvgJtzsRkFYNJzZrhTdtMoGVBttwzzQJkPnS3WWTFc7kuDRoPtPakl+T+OfdEUjYJj7Jbow==
 
+"@types/scheduler@^0.16":
+  version "0.16.8"
+  resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
+  integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==
+
 "@types/[email protected]":
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.0.tgz#591c1ce3a702c45ee15f47a42ade72c2fd78978a"
@@ -18166,13 +18165,6 @@ highlight.js@^8.5.0:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-8.9.1.tgz#b8a9c5493212a9392f0222b649c9611497ebfb88"
   integrity sha1-uKnFSTISqTkvAiK2SclhFJfr+4g=
 
-[email protected]:
-  version "5.0.0-beta.4"
-  resolved "https://registry.yarnpkg.com/history/-/history-5.0.0-beta.4.tgz#7fd3bb1f6c75d00d9b5112a816766bfc72d1a3cd"
-  integrity sha512-LMUnKPB5UlEzDF1BO0VxtDsrguGPO7SuQEmB/5OjL1305afR1O8FvX29rbJep4g2SLmKK3YdDA7+8ZDs8P8n8g==
-  dependencies:
-    "@babel/runtime" "^7.7.6"
-
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -26207,6 +26199,15 @@ [email protected]:
     prop-types "^15.6.2"
     scheduler "^0.13.6"
 
+[email protected], react-dom@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
+  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    scheduler "^0.20.2"
+
 react-dom@^15.3.2:
   version "15.7.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.7.0.tgz#39106dee996d0742fb0f43d567ef8b8153483ab2"
@@ -26217,7 +26218,7 @@ react-dom@^15.3.2:
     object-assign "^4.1.0"
     prop-types "^15.5.10"
 
-react-dom@^16, react-dom@^16.0.0:
+react-dom@^16.0.0:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
   integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
@@ -26268,14 +26269,6 @@ react-remove-scroll@^2.3.0:
     use-callback-ref "^1.2.3"
     use-sidecar "^1.0.1"
 
-[email protected]:
-  version "6.0.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.0.0-alpha.1.tgz#10798a64402d3f113ba8e5bed04bf3009b1d28df"
-  integrity sha512-k53/EN/yOIy+iSuolJc+3uGAUq06AuEhTXDCac2Hk+YBfRD4fD0cQL3Ram79J8ishRQehycjcfn3+S45iNZb9g==
-  dependencies:
-    history "5.0.0-beta.4"
-    prop-types "^15.7.2"
-
 [email protected]:
   version "6.10.0"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.10.0.tgz#090ddc5c84dc41b583ce08468c4007c84245f61f"
@@ -26284,14 +26277,6 @@ [email protected]:
     "@remix-run/router" "1.5.0"
     react-router "6.10.0"
 
-[email protected]:
-  version "6.0.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.0.0-alpha.1.tgz#1bc907f221476e5514370bf296defe41c57e70cd"
-  integrity sha512-OMQHBebegYqFUKvp9ylogY1bnMGy+hSfYMFmY2VKvVgkYVkBIZwFbhBOwe8IP448KFCrIAyPafBidpJyk9Ga9g==
-  dependencies:
-    history "5.0.0-beta.4"
-    prop-types "^15.7.2"
-
 [email protected]:
   version "6.10.0"
   resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.10.0.tgz#230f824fde9dd0270781b5cb497912de32c0a971"
@@ -26328,6 +26313,14 @@ [email protected]:
     prop-types "^15.6.2"
     scheduler "^0.13.6"
 
+[email protected], react@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 react@^15.3.2:
   version "15.7.0"
   resolved "https://registry.yarnpkg.com/react/-/react-15.7.0.tgz#10308fd42ac6912a250bf00380751abc41ac7106"
@@ -26339,7 +26332,7 @@ react@^15.3.2:
     object-assign "^4.1.0"
     prop-types "^15.5.10"
 
-react@^16, react@^16.0.0, react@^16.13.1:
+react@^16.0.0, react@^16.13.1:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
   integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
@@ -27475,6 +27468,14 @@ scheduler@^0.19.1:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
+scheduler@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 schema-utils@>1.0.0, schema-utils@^4.0.0, schema-utils@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.2.0.tgz#70d7c93e153a273a805801882ebd3bff20d89c8b"