Fix Fast Refresh for React 18 (#35718)

- Updates the React 18 test suite to the latest React version. - Upgrade `react-refresh` module Fixes #35518 Fixes #35703 ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `yarn lint` Co-authored-by: Jiachi Liu <[email protected]>
vercel · Mar 30, 2022 · 62bb348 · 62bb348
1 parent a00268e
commit 62bb348
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 33 deletions.
diff --git a/package.json b/package.json
@@ -146,9 +146,9 @@
     "pretty-ms": "7.0.0",
     "random-seed": "0.3.0",
     "react": "17.0.2",
-    "react-18": "npm:[email protected]-rc.2",
+    "react-18": "npm:[email protected]",
     "react-dom": "17.0.2",
-    "react-dom-18": "npm:[email protected]-rc.2",
+    "react-dom-18": "npm:[email protected]",
     "react-ssr-prepass": "1.0.8",
     "react-virtualized": "9.22.3",
     "relay-compiler": "13.0.2",

diff --git a/packages/next/package.json b/packages/next/package.json
@@ -239,7 +239,7 @@
     "querystring-es3": "0.2.1",
     "raw-body": "2.4.1",
     "react-is": "17.0.2",
-    "react-refresh": "0.8.3",
+    "react-refresh": "0.12.0",
     "react-server-dom-webpack": "0.0.0-experimental-577f2de46-20220320",
     "regenerator-runtime": "0.13.4",
     "sass-loader": "12.4.0",

diff --git a/packages/react-refresh-utils/package.json b/packages/react-refresh-utils/package.json
@@ -19,7 +19,7 @@
     "dev": "tsc -d -w -p tsconfig.json"
   },
   "peerDependencies": {
-    "react-refresh": "0.8.3",
+    "react-refresh": "0.12.0",
     "webpack": "^4 || ^5"
   },
   "peerDependenciesMeta": {
@@ -28,6 +28,6 @@
     }
   },
   "devDependencies": {
-    "react-refresh": "0.8.3"
+    "react-refresh": "0.12.0"
   }
 }
diff --git a/run-tests.js b/run-tests.js
@@ -216,8 +216,8 @@ async function main() {
     // to avoid having to run yarn each time
     console.log('Creating Next.js install for isolated tests')
     const testStarter = await createNextInstall({
-      react: 'latest',
-      'react-dom': 'latest',
+      react: '17.0.2',
+      'react-dom': '17.0.2',
     })
     process.env.NEXT_TEST_STARTER = testStarter
   }

diff --git a/test/development/basic/hmr.test.ts b/test/development/basic/hmr.test.ts
@@ -22,6 +22,10 @@ describe('basic HMR', () => {
         pages: new FileRef(join(__dirname, 'hmr/pages')),
         components: new FileRef(join(__dirname, 'hmr/components')),
       },
+      dependencies: {
+        react: 'latest',
+        'react-dom': 'latest',
+      },
     })
   })
   afterAll(() => next.destroy())
@@ -561,7 +565,7 @@ describe('basic HMR', () => {
             'Unknown'
           )
         ).toMatch(
-          'Objects are not valid as a React child (found: /search/). If you meant to render a collection of children, use an array instead.'
+          'Objects are not valid as a React child (found: [object RegExp]). If you meant to render a collection of children, use an array instead.'
         )
 
         await next.patchFile(aboutPage, aboutContent)
@@ -714,7 +718,10 @@ describe('basic HMR', () => {
             await waitFor(2000)
             throw new Error('waiting')
           }
-          return getRedboxSource(browser)
+
+          await waitFor(2000)
+          const source = await getRedboxSource(browser)
+          return source
         }, /an-expected-error-in-gip/)
       } catch (err) {
         await next.patchFile(erroredPage, errorContent)

diff --git a/test/e2e/next-head/index.test.ts b/test/e2e/next-head/index.test.ts
@@ -14,6 +14,10 @@ describe('should set-up next', () => {
         pages: new FileRef(join(__dirname, 'app/pages')),
         components: new FileRef(join(__dirname, 'app/components')),
       },
+      dependencies: {
+        react: '17',
+        'react-dom': '17',
+      },
     })
   })
   afterAll(() => next.destroy())

diff --git a/test/e2e/next-script-worker-strategy/index.test.ts b/test/e2e/next-script-worker-strategy/index.test.ts
@@ -25,7 +25,11 @@ describe('experimental.nextScriptWorkers: false with no Partytown dependency', (
           }
         `,
       },
-      dependencies: {},
+      // TODO: @housseindjirdeh: verify React 18 functionality
+      dependencies: {
+        react: '17.0.2',
+        'react-dom': '17.0.2',
+      },
     })
   })
   afterAll(() => next.destroy())
@@ -56,6 +60,10 @@ describe('experimental.nextScriptWorkers: true with required Partytown dependenc
         experimental: {
           nextScriptWorkers: true,
         },
+        dependencies: {
+          react: '17',
+          'react-dom': '17',
+        },
       },
       files: {
         'pages/index.js': `
@@ -190,6 +198,8 @@ describe('experimental.nextScriptWorkers: true with config override', () => {
       },
       dependencies: {
         '@builder.io/partytown': '0.4.2',
+        react: '17',
+        'react-dom': '17',
       },
     })
   })

diff --git a/test/lib/next-modes/base.ts b/test/lib/next-modes/base.ts
@@ -90,8 +90,8 @@ export class NextInstance {
     } else if (!skipIsolatedNext) {
       this.testDir = await createNextInstall(
         {
-          react: 'latest',
-          'react-dom': 'latest',
+          react: '17.0.2',
+          'react-dom': '17.0.2',
           ...this.dependencies,
           ...((this.packageJson.dependencies as object | undefined) || {}),
         },

diff --git a/test/production/react-18-streaming-ssr/index.test.ts b/test/production/react-18-streaming-ssr/index.test.ts
@@ -24,8 +24,8 @@ describe('react 18 streaming SSR in minimal mode', () => {
         },
       },
       dependencies: {
-        react: '18.0.0-rc.2',
-        'react-dom': '18.0.0-rc.2',
+        react: '18.0.0',
+        'react-dom': '18.0.0',
       },
     })
   })
@@ -70,8 +70,8 @@ describe('react 18 streaming SSR with custom next configs', () => {
         },
       },
       dependencies: {
-        react: '18.0.0-rc.2',
-        'react-dom': '18.0.0-rc.2',
+        react: '18.0.0',
+        'react-dom': '18.0.0',
       },
       installCommand: 'npm install',
     })

diff --git a/yarn.lock b/yarn.lock
@@ -17778,20 +17778,20 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7, rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-"react-18@npm:[email protected]-rc.2":
-  version "18.0.0-rc.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.0.0-rc.2.tgz#f54de68a912454331f7f718794fbf5e6c01eb855"
-  integrity sha512-q32FWyA5HvqfRCN0ZOk0gUOpzJGPPh8fqbk8DYQuh4DyiGWiNgN/BxMq3/ScY0SlwDB1HOAMU1lUgtaOr5p2Ng==
+"react-18@npm:[email protected]":
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96"
+  integrity sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==
   dependencies:
     loose-envify "^1.1.0"
 
-"react-dom-18@npm:[email protected]-rc.2":
-  version "18.0.0-rc.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0-rc.2.tgz#b0a55afc2a2385e9e518071eaf7c89f0c214bba5"
-  integrity sha512-EvLlgtc/wAzAIXX5V1gnLgeK9B3wAdEGmmrXXKRoRzXM0RNNwGN+6OxQPBlACiGDUYYEOk+GT8f6u+gNWDnTtg==
+"react-dom-18@npm:[email protected]":
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0.tgz#26b88534f8f1dbb80853e1eabe752f24100d8023"
+  integrity sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==
   dependencies:
     loose-envify "^1.1.0"
-    scheduler "^0.21.0-rc.2"
+    scheduler "^0.21.0"
 
 [email protected]:
   version "17.0.2"
@@ -17821,10 +17821,10 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-refresh@0.8.3:
-  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
-  integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
+react-refresh@0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.12.0.tgz#28ac0a2c30ef2bb3433d5fd0621e69a6d774c3a4"
+  integrity sha512-suLIhrU2IHKL5JEKR/fAwJv7bbeq4kJ+pJopf77jHwuR+HmJS/HbrPIGsTBUVfw7tXPOmYv7UJ7PCaN49e8x4A==
 
 [email protected]:
   version "0.0.0-experimental-577f2de46-20220320"
@@ -18801,10 +18801,10 @@ scheduler@^0.20.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-scheduler@^0.21.0-rc.2:
-  version "0.21.0-rc.1-next-f468816ef-20220225"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0-rc.1-next-f468816ef-20220225.tgz#1909b9ce9e67de48f5ca06b52d98828401771e66"
-  integrity sha512-/maKldJ78Ba2o1e9kh2mUpqNZH7XrmSQ1o1aa3HUPN/OMotUB9+pBKX/y3Zihkjco21H4cujG9hK2sJOZUpzJw==
+scheduler@^0.21.0:
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
+  integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==
   dependencies:
     loose-envify "^1.1.0"