Rename The Secret Export of Server Internals (#28786)

We have a different set of dispatchers that Flight uses. This also includes the `jsx-runtime` which must also be aliased to use the right version. To ensure the right versions are used together we rename the export of the SharedInternals from 'react' and alias it in relevant bundles.
facebook · Apr 11, 2024 · 18b8972 · 18b8972
1 parent a1d9866
commit 18b8972
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 5 deletions.
diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js
@@ -57,8 +57,8 @@ describe('ReactFlight', () => {
     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();
+    __unmockReact();
     jest.mock('react-noop-renderer/flight-modules', () => flightModules);
     React = require('react');
     startTransition = React.startTransition;
@@ -2161,7 +2161,9 @@ describe('ReactFlight', () => {
       jest.mock('react', () => require('react/react.react-server'));
       ReactServer = require('react');
       ReactNoopFlightServer = require('react-noop-renderer/flight-server');
-      transport = ReactNoopFlightServer.render({root: <ServerComponent />});
+      transport = ReactNoopFlightServer.render({
+        root: ReactServer.createElement(ServerComponent),
+      });
     }).toErrorDev('err');
 
     expect(mockConsoleLog).toHaveBeenCalledTimes(1);

diff --git a/packages/react-reconciler/src/__tests__/ReactCache-test.js b/packages/react-reconciler/src/__tests__/ReactCache-test.js
@@ -25,6 +25,9 @@ describe('ReactCache', () => {
     ReactNoopFlightClient = require('react-noop-renderer/flight-client');
 
     cache = React.cache;
+
+    jest.resetModules();
+    __unmockReact();
   });
 
   // @gate enableCache

diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMReply-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMReply-test.js
@@ -35,6 +35,7 @@ describe('ReactFlightDOMReply', () => {
     React = require('react');
     ReactServerDOMServer = require('react-server-dom-webpack/server.browser');
     jest.resetModules();
+    __unmockReact();
     ReactServerDOMClient = require('react-server-dom-webpack/client');
   });
 

diff --git a/packages/react-server/src/ReactSharedInternalsServer.js b/packages/react-server/src/ReactSharedInternalsServer.js
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+
+const ReactSharedInternalsServer =
+  // $FlowFixMe: It's defined in the one we resolve to.
+  React.__SECRET_SERVER_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+if (!ReactSharedInternalsServer) {
+  throw new Error(
+    'The "react" package in this environment is not configured correctly. ' +
+      'The "react-server" condition must be enabled in any environment that ' +
+      'runs React Server Components.',
+  );
+}
+
+export default ReactSharedInternalsServer;
diff --git a/packages/react/src/ReactServer.experimental.js b/packages/react/src/ReactServer.experimental.js
@@ -10,7 +10,7 @@
 // Patch fetch
 import './ReactFetch';
 
-export {default as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED} from './ReactSharedInternalsServer';
+export {default as __SECRET_SERVER_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED} from './ReactSharedInternalsServer';
 
 import {forEach, map, count, toArray, only} from './ReactChildren';
 import {

diff --git a/packages/react/src/ReactServer.js b/packages/react/src/ReactServer.js
@@ -10,7 +10,7 @@
 // Patch fetch
 import './ReactFetch';
 
-export {default as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED} from './ReactSharedInternalsServer';
+export {default as __SECRET_SERVER_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED} from './ReactSharedInternalsServer';
 
 import {forEach, map, count, toArray, only} from './ReactChildren';
 import {

diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
@@ -98,6 +98,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react/src/ReactServer.js',
     name: 'react.react-server',
+    condition: 'react-server',
     global: 'React',
     minifyWithProdErrorCodes: true,
     wrapWithModuleBoundaries: false,
@@ -109,6 +110,7 @@ const bundles = [
     bundleTypes: __EXPERIMENTAL__ ? [FB_WWW_DEV, FB_WWW_PROD] : [],
     moduleType: ISOMORPHIC,
     entry: 'react/src/ReactServerFB.js',
+    condition: 'react-server',
     global: 'ReactServer',
     minifyWithProdErrorCodes: true,
     wrapWithModuleBoundaries: false,
@@ -140,6 +142,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react/src/jsx/ReactJSXServer.js',
     name: 'react-jsx-runtime.react-server',
+    condition: 'react-server',
     global: 'JSXRuntime',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
@@ -194,6 +197,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-dom/src/ReactDOMServer.js',
     name: 'react-dom.react-server',
+    condition: 'react-server',
     global: 'ReactDOM',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
@@ -289,6 +293,7 @@ const bundles = [
     bundleTypes: __EXPERIMENTAL__ ? [FB_WWW_DEV, FB_WWW_PROD] : [],
     moduleType: RENDERER,
     entry: 'react-server-dom-fb/src/ReactDOMServerFB.js',
+    condition: 'react-server',
     global: 'ReactDOMServerStreaming',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
@@ -350,6 +355,7 @@ const bundles = [
     bundleTypes: [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
     moduleType: RENDERER,
     entry: 'react-server-dom-webpack/server.browser',
+    condition: 'react-server',
     global: 'ReactServerDOMServer',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
@@ -359,6 +365,7 @@ const bundles = [
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
     entry: 'react-server-dom-webpack/server.node',
+    condition: 'react-server',
     global: 'ReactServerDOMServer',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
@@ -368,6 +375,7 @@ const bundles = [
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
     entry: 'react-server-dom-webpack/server.node.unbundled',
+    condition: 'react-server',
     global: 'ReactServerDOMServer',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
@@ -377,6 +385,7 @@ const bundles = [
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
     entry: 'react-server-dom-webpack/server.edge',
+    condition: 'react-server',
     global: 'ReactServerDOMServer',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
@@ -437,6 +446,7 @@ const bundles = [
     bundleTypes: [ESM_PROD],
     moduleType: RENDERER_UTILS,
     entry: 'react-server-dom-webpack/node-loader',
+    condition: 'react-server',
     global: 'ReactServerWebpackNodeLoader',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
@@ -449,6 +459,7 @@ const bundles = [
     moduleType: RENDERER_UTILS,
     entry: 'react-server-dom-webpack/src/ReactFlightWebpackNodeRegister',
     name: 'react-server-dom-webpack-node-register',
+    condition: 'react-server',
     global: 'ReactFlightWebpackNodeRegister',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
@@ -460,6 +471,7 @@ const bundles = [
     bundleTypes: [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
     moduleType: RENDERER,
     entry: 'react-server-dom-turbopack/server.browser',
+    condition: 'react-server',
     global: 'ReactServerDOMServer',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
@@ -469,6 +481,7 @@ const bundles = [
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
     entry: 'react-server-dom-turbopack/server.node',
+    condition: 'react-server',
     global: 'ReactServerDOMServer',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
@@ -478,6 +491,7 @@ const bundles = [
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
     entry: 'react-server-dom-turbopack/server.node.unbundled',
+    condition: 'react-server',
     global: 'ReactServerDOMServer',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
@@ -487,6 +501,7 @@ const bundles = [
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
     entry: 'react-server-dom-turbopack/server.edge',
+    condition: 'react-server',
     global: 'ReactServerDOMServer',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
@@ -540,6 +555,7 @@ const bundles = [
     bundleTypes: [ESM_PROD],
     moduleType: RENDERER_UTILS,
     entry: 'react-server-dom-turbopack/node-loader',
+    condition: 'react-server',
     global: 'ReactServerTurbopackNodeLoader',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
@@ -552,6 +568,7 @@ const bundles = [
     moduleType: RENDERER_UTILS,
     entry: 'react-server-dom-turbopack/src/ReactFlightTurbopackNodeRegister',
     name: 'react-server-dom-turbopack-node-register',
+    condition: 'react-server',
     global: 'ReactFlightWebpackNodeRegister',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
@@ -563,6 +580,7 @@ const bundles = [
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
     entry: 'react-server-dom-esm/server.node',
+    condition: 'react-server',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
     externals: ['react', 'util', 'crypto', 'async_hooks', 'react-dom'],
@@ -591,6 +609,7 @@ const bundles = [
     bundleTypes: [ESM_PROD],
     moduleType: RENDERER_UTILS,
     entry: 'react-server-dom-esm/node-loader',
+    condition: 'react-server',
     global: 'ReactServerESMNodeLoader',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
@@ -602,6 +621,7 @@ const bundles = [
     bundleTypes: __EXPERIMENTAL__ ? [FB_WWW_DEV, FB_WWW_PROD] : [],
     moduleType: RENDERER,
     entry: 'react-server-dom-fb/src/ReactFlightDOMServerFB.js',
+    condition: 'react-server',
     global: 'ReactFlightDOMServer',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
@@ -796,6 +816,7 @@ const bundles = [
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
     entry: 'react-noop-renderer/flight-server',
+    condition: 'react-server',
     global: 'ReactNoopFlightServer',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
@@ -850,6 +871,7 @@ const bundles = [
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RECONCILER,
     entry: 'react-server/flight',
+    condition: 'react-server',
     global: 'ReactFlightServer',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,

diff --git a/scripts/rollup/forks.js b/scripts/rollup/forks.js
@@ -58,7 +58,9 @@ const forks = Object.freeze({
   './packages/shared/ReactSharedInternals.js': (
     bundleType,
     entry,
-    dependencies
+    dependencies,
+    _moduleType,
+    bundle
   ) => {
     if (entry === 'react') {
       return './packages/react/src/ReactSharedInternalsClient.js';
@@ -69,6 +71,9 @@ const forks = Object.freeze({
     ) {
       return './packages/react/src/ReactSharedInternalsServer.js';
     }
+    if (bundle.condition === 'react-server') {
+      return './packages/react-server/src/ReactSharedInternalsServer.js';
+    }
     if (!entry.startsWith('react/') && dependencies.indexOf('react') === -1) {
       // React internals are unavailable if we can't reference the package.
       // We return an error because we only want to throw if this module gets used.