Enforce that the "react-server" build of "react" is used

I do this by simply renaming the secret export name in that bundle.

Author: sebmarkbage

.eslintrc.js

@@ -517,6 +517,7 @@ module.exports = {
     __TEST__: 'readonly',
     __UMD__: 'readonly',
     __VARIANT__: 'readonly',
+    __unmockReact: 'readonly',
     gate: 'readonly',
     trustedTypes: 'readonly',
     IS_REACT_ACT_ENVIRONMENT: 'readonly',

packages/react-client/src/__tests__/ReactFlight-test.js

@@ -14,6 +14,7 @@ let act;
 let use;
 let startTransition;
 let React;
+let ReactServer;
 let ReactNoop;
 let ReactNoopFlightServer;
 let ReactNoopFlightClient;
@@ -25,12 +26,18 @@ let assertLog;
 describe('ReactFlight', () => {
   beforeEach(() => {
     jest.resetModules();
-
+    jest.mock('react', () => require('react/react.shared-subset'));
+    ReactServer = require('react');
+    ReactNoopFlightServer = require('react-noop-renderer/flight-server');
+    // This stores the state so we need to preserve it
+    const flightModules = require('react-noop-renderer/flight-modules');
+    __unmockReact();
+    jest.resetModules();
+    jest.mock('react-noop-renderer/flight-modules', () => flightModules);
     React = require('react');
     startTransition = React.startTransition;
     use = React.use;
     ReactNoop = require('react-noop-renderer');
-    ReactNoopFlightServer = require('react-noop-renderer/flight-server');
     ReactNoopFlightClient = require('react-noop-renderer/flight-client');
     act = require('internal-test-utils').act;
     Scheduler = require('scheduler');
@@ -111,6 +118,19 @@ describe('ReactFlight', () => {
     return ctx;
   }
 
+  function createServerServerContext(globalName, defaultValue, withStack) {
+    let ctx;
+    expect(() => {
+      ctx = ReactServer.createServerContext(globalName, defaultValue);
+    }).toErrorDev(
+      'Server Context is deprecated and will soon be removed. ' +
+        'It was never documented and we have found it not to be useful ' +
+        'enough to warrant the downside it imposes on all apps.',
+      {withoutStack: !withStack},
+    );
+    return ctx;
+  }
+
   function clientReference(value) {
     return Object.defineProperties(
       function () {
@@ -970,7 +990,7 @@ describe('ReactFlight', () => {
     const Context = React.createContext();
     const ClientContext = clientReference(Context);
     function ServerComponent() {
-      return React.useContext(ClientContext);
+      return ReactServer.useContext(ClientContext);
     }
     expect(() => {
       const transport = ReactNoopFlightServer.render(<ServerComponent />);
@@ -982,7 +1002,7 @@ describe('ReactFlight', () => {
 
   describe('Hooks', () => {
     function DivWithId({children}) {
-      const id = React.useId();
+      const id = ReactServer.useId();
       return <div prop={id}>{children}</div>;
     }
 
@@ -1039,7 +1059,7 @@ describe('ReactFlight', () => {
       // so the output passed to the Client has no knowledge of the useId use. In the future we would like to add a DEV warning when this happens. For now
       // we just accept that it is a nuance of useId in Flight
       function App() {
-        const id = React.useId();
+        const id = ReactServer.useId();
         const div = <div prop={id}>{id}</div>;
         return <ClientDoublerModuleRef el={div} />;
       }
@@ -1076,12 +1096,12 @@ describe('ReactFlight', () => {
   describe('ServerContext', () => {
     // @gate enableServerContext
     it('supports basic createServerContext usage', async () => {
-      const ServerContext = createServerContext(
+      const ServerContext = createServerServerContext(
         'ServerContext',
         'hello from server',
       );
       function Foo() {
-        const context = React.useContext(ServerContext);
+        const context = ReactServer.useContext(ServerContext);
         return <div>{context}</div>;
       }
 
@@ -1097,7 +1117,10 @@ describe('ReactFlight', () => {
 
     // @gate enableServerContext
     it('propagates ServerContext providers in flight', async () => {
-      const ServerContext = createServerContext('ServerContext', 'default');
+      const ServerContext = createServerServerContext(
+        'ServerContext',
+        'default',
+      );
 
       function Foo() {
         return (
@@ -1109,7 +1132,7 @@ describe('ReactFlight', () => {
         );
       }
       function Bar() {
-        const context = React.useContext(ServerContext);
+        const context = ReactServer.useContext(ServerContext);
         return context;
       }
 
@@ -1125,7 +1148,7 @@ describe('ReactFlight', () => {
 
     // @gate enableServerContext
     it('errors if you try passing JSX through ServerContext value', () => {
-      const ServerContext = createServerContext('ServerContext', {
+      const ServerContext = createServerServerContext('ServerContext', {
         foo: {
           bar: <span>hi this is default</span>,
         },
@@ -1146,7 +1169,7 @@ describe('ReactFlight', () => {
         );
       }
       function Bar() {
-        const context = React.useContext(ServerContext);
+        const context = ReactServer.useContext(ServerContext);
         return context.foo.bar;
       }
 
@@ -1159,7 +1182,10 @@ describe('ReactFlight', () => {
 
     // @gate enableServerContext
     it('propagates ServerContext and cleans up the providers in flight', async () => {
-      const ServerContext = createServerContext('ServerContext', 'default');
+      const ServerContext = createServerServerContext(
+        'ServerContext',
+        'default',
+      );
 
       function Foo() {
         return (
@@ -1181,7 +1207,7 @@ describe('ReactFlight', () => {
         );
       }
       function Bar() {
-        const context = React.useContext(ServerContext);
+        const context = ReactServer.useContext(ServerContext);
         return <span>{context}</span>;
       }
 
@@ -1203,7 +1229,10 @@ describe('ReactFlight', () => {
 
     // @gate enableServerContext
     it('propagates ServerContext providers in flight after suspending', async () => {
-      const ServerContext = createServerContext('ServerContext', 'default');
+      const ServerContext = createServerServerContext(
+        'ServerContext',
+        'default',
+      );
 
       function Foo() {
         return (
@@ -1231,7 +1260,7 @@ describe('ReactFlight', () => {
           throw promise;
         }
         Scheduler.log('rendered');
-        const context = React.useContext(ServerContext);
+        const context = ReactServer.useContext(ServerContext);
         return context;
       }
 
@@ -1248,8 +1277,6 @@ describe('ReactFlight', () => {
       assertLog(['rendered']);
 
       await act(async () => {
-        ServerContext._currentRenderer = null;
-        ServerContext._currentRenderer2 = null;
         ReactNoop.render(await ReactNoopFlightClient.read(transport));
       });
 
@@ -1258,11 +1285,15 @@ describe('ReactFlight', () => {
 
     // @gate enableServerContext
     it('serializes ServerContext to client', async () => {
-      const ServerContext = createServerContext('ServerContext', 'default');
+      const ServerContext = createServerServerContext(
+        'ServerContext',
+        'default',
+      );
+      const ClientContext = createServerContext('ServerContext', 'default');
 
       function ClientBar() {
         Scheduler.log('ClientBar');
-        const context = React.useContext(ServerContext);
+        const context = React.useContext(ClientContext);
         return <span>{context}</span>;
       }
 
@@ -1285,8 +1316,6 @@ describe('ReactFlight', () => {
       assertLog([]);
 
       await act(async () => {
-        ServerContext._currentRenderer = null;
-        ServerContext._currentRenderer2 = null;
         const flightModel = await ReactNoopFlightClient.read(transport);
         ReactNoop.render(flightModel.foo);
       });
@@ -1301,9 +1330,12 @@ describe('ReactFlight', () => {
 
     // @gate enableServerContext
     it('takes ServerContext from the client for refetching use cases', async () => {
-      const ServerContext = createServerContext('ServerContext', 'default');
+      const ServerContext = createServerServerContext(
+        'ServerContext',
+        'default',
+      );
       function Bar() {
-        return <span>{React.useContext(ServerContext)}</span>;
+        return <span>{ReactServer.useContext(ServerContext)}</span>;
       }
       const transport = ReactNoopFlightServer.render(<Bar />, {
         context: [['ServerContext', 'Override']],
@@ -1321,7 +1353,7 @@ describe('ReactFlight', () => {
       let ServerContext;
       function inlineLazyServerContextInitialization() {
         if (!ServerContext) {
-          ServerContext = createServerContext('ServerContext', 'default');
+          ServerContext = createServerServerContext('ServerContext', 'default');
         }
         return ServerContext;
       }
@@ -1346,7 +1378,7 @@ describe('ReactFlight', () => {
         return (
           <article>
             <div>
-              {React.useContext(inlineLazyServerContextInitialization())}
+              {ReactServer.useContext(inlineLazyServerContextInitialization())}
             </div>
             <Baz />
           </article>
@@ -1381,11 +1413,17 @@ describe('ReactFlight', () => {
       // Reset all modules, except flight-modules which keeps the registry of Client Components
       const flightModules = require('react-noop-renderer/flight-modules');
       jest.resetModules();
+      jest.mock('react', () => require('react/react.shared-subset'));
       jest.mock('react-noop-renderer/flight-modules', () => flightModules);
 
+      ReactServer = require('react');
+      ReactNoopFlightServer = require('react-noop-renderer/flight-server');
+
+      __unmockReact();
+      jest.resetModules();
+      jest.mock('react-noop-renderer/flight-modules', () => flightModules);
       React = require('react');
       ReactNoop = require('react-noop-renderer');
-      ReactNoopFlightServer = require('react-noop-renderer/flight-server');
       ReactNoopFlightClient = require('react-noop-renderer/flight-client');
       act = require('internal-test-utils').act;
       Scheduler = require('scheduler');

packages/react-server-dom-turbopack/src/__tests__/ReactFlightDOM-test.js

@@ -62,7 +62,7 @@ describe('ReactFlightDOM', () => {
 
     // This reset is to load modules for the SSR/Browser scope.
     jest.resetModules();
-    jest.unmock('react');
+    __unmockReact();
     act = require('internal-test-utils').act;
     Stream = require('stream');
     React = require('react');