[test] Avoid hydration errors in react-compiler tests (vercel#74928)

Author: eps1lon

package.json

@@ -132,7 +132,7 @@
     "alex": "9.1.0",
     "amphtml-validator": "1.0.38",
     "async-sema": "3.0.1",
-    "babel-plugin-react-compiler": "0.0.0-experimental-c23de8d-20240515",
+    "babel-plugin-react-compiler": "19.0.0-beta-e552027-20250112",
     "browserslist": "4.22.2",
     "buffer": "5.6.0",
     "cheerio": "0.22.0",

packages/next/package.json

@@ -227,7 +227,7 @@
     "assert": "2.0.0",
     "async-retry": "1.2.3",
     "async-sema": "3.0.0",
-    "babel-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
+    "babel-plugin-react-compiler": "19.0.0-beta-e552027-20250112",
     "babel-plugin-transform-define": "2.0.0",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "browserify-zlib": "0.2.0",

pnpm-lock.yaml

@@ -1,25 +1,25 @@
 'use client'
 
+import { useEffect } from 'react'
+
 export default function Page() {
-  let heading: any = ''
+  let $_: any
   if (typeof window !== 'undefined') {
     // eslint-disable-next-line no-eval
-    const $_ = eval('$')
+    $_ = eval('$')
+  }
 
+  useEffect(() => {
     if (Array.isArray($_)) {
-      heading = (
-        <h1 id="react-compiler-enabled-message">
-          {/* @ts-ignore */}
-          React compiler is enabled with <strong>{$_.length}</strong> memo slots
-        </h1>
-      )
+      document.getElementById('react-compiler-enabled-message')!.textContent =
+        `React compiler is enabled with ${$_!.length} memo slots`
     }
-  }
+  })
 
   return (
     <>
       <div>
-        {heading}
+        <h1 id="react-compiler-enabled-message" />
         <p>hello world</p>
       </div>
     </>

test/e2e/react-compiler/app/page.tsx

@@ -40,7 +40,7 @@ describe.each(
           },
 
     dependencies: {
-      'babel-plugin-react-compiler': '0.0.0-experimental-4690415-20240515',
+      'babel-plugin-react-compiler': '19.0.0-beta-e552027-20250112',
       ...dependencies,
     },
   })