Repository: facebook/react
Pull request: Fix local react usage in DOM fixture

The DOM fixture hasn't worked on local builds since the UMD support was removed in https://github.com/facebook/react/pull/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.

Changed files:
filename: .github/workflows/runtime_build_and_test.yml
patch: @@ -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

filename: fixtures/dom/package.json
patch: @@ -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"

filename: fixtures/dom/src/index.js
patch: @@ -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')
+        );
+      }
+    });
+}

filename: fixtures/dom/src/react-loader.js
patch: @@ -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';