Fix local react usage in DOM fixture (#32080)

The DOM fixture hasn't worked on local builds since the UMD support was
removed in #28735

Here we update the fixture to set the local experimental builds to
window. Some of the pages are still broken, such as hydration. But these
bugs exist on other versions as well and can be cleaned up separately.

Author: jackpope

.github/workflows/runtime_build_and_test.yml

@@ -416,7 +416,6 @@ jobs:
       - name: Ensure clean build directory
         run: rm -rf build
       - run: yarn install --frozen-lockfile
-      - run: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
         working-directory: fixtures/dom
       - name: Restore archived build
         uses: actions/download-artifact@v4

fixtures/dom/package.json

@@ -14,13 +14,13 @@
     "jest-diff": "^29.4.1",
     "prop-types": "^15.6.0",
     "query-string": "^4.2.3",
-    "react": "^15.4.1",
-    "react-dom": "^15.4.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "semver": "^5.5.0"
   },
   "scripts": {
     "dev": "react-scripts start",
-    "predev": "cp -a ../../build/oss-stable/. node_modules",
+    "predev": "cp -a ../../build/oss-experimental/. node_modules",
     "build": "react-scripts build && cp build/index.html build/200.html",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"

fixtures/dom/src/index.js

@@ -1,21 +1,42 @@
 import './polyfills';
-import loadReact from './react-loader';
+import loadReact, {isLocal} from './react-loader';
 
-loadReact()
-  .then(() => import('./components/App'))
-  .then(App => {
-    const {React, ReactDOM} = window;
-
-    if (typeof window.ReactDOMClient !== 'undefined') {
-      // we are in a React that only supports modern roots
-
-      ReactDOM.createRoot(document.getElementById('root')).render(
-        React.createElement(App.default)
+if (isLocal()) {
+  Promise.all([import('react'), import('react-dom/client')])
+    .then(([React, ReactDOMClient]) => {
+      if (React === undefined || ReactDOMClient === undefined) {
+        throw new Error(
+          'Unable to load React. Build experimental and then run `yarn dev` again'
+        );
+      }
+      window.React = React;
+      window.ReactDOMClient = ReactDOMClient;
+    })
+    .then(() => import('./components/App'))
+    .then(App => {
+      window.ReactDOMClient.createRoot(document.getElementById('root')).render(
+        window.React.createElement(App.default)
       );
-    } else {
-      ReactDOM.render(
-        React.createElement(App.default),
-        document.getElementById('root')
-      );
-    }
-  });
+    });
+} else {
+  loadReact()
+    .then(() => import('./components/App'))
+    .then(App => {
+      const {React, ReactDOM} = window;
+      if (
+        typeof window.ReactDOMClient !== 'undefined' &&
+        typeof window.ReactDOMClient.createRoot !== 'undefined'
+      ) {
+        // we are in a React that only supports modern roots
+
+        window.ReactDOMClient.createRoot(
+          document.getElementById('root')
+        ).render(React.createElement(App.default));
+      } else {
+        ReactDOM.render(
+          React.createElement(App.default),
+          document.getElementById('root')
+        );
+      }
+    });
+}

fixtures/dom/src/react-loader.js

@@ -68,6 +68,10 @@ function getVersion() {
   return query.version || 'local';
 }
 
+export function isLocal() {
+  return getVersion() === 'local';
+}
+
 export function reactPaths(version = getVersion()) {
   let query = parseQuery(window.location.search);
   let isProduction = query.production === 'true';