diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index 6f1cdd74d108..09b6718050f0 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -29,6 +29,7 @@ import { readPartialStringChunk, readFinalStringChunk, createStringDecoder, + usedWithSSR, } from './ReactFlightClientConfig'; import { @@ -529,8 +530,10 @@ function createServerReferenceProxy, T>( }); }; // Expose encoder for use by SSR. - // TODO: Only expose this in SSR builds and not the browser client. - proxy.$$FORM_ACTION = encodeFormAction; + if (usedWithSSR) { + // Only expose this in builds that would actually use it. Not needed on the client. + (proxy: any).$$FORM_ACTION = encodeFormAction; + } knownServerReferences.set(proxy, metaData); return proxy; } diff --git a/packages/react-client/src/ReactFlightReplyClient.js b/packages/react-client/src/ReactFlightReplyClient.js index d1f136208945..122c007cdbc8 100644 --- a/packages/react-client/src/ReactFlightReplyClient.js +++ b/packages/react-client/src/ReactFlightReplyClient.js @@ -28,6 +28,8 @@ import type { RejectedThenable, } from '../../shared/ReactTypes'; +import {usedWithSSR} from './ReactFlightClientConfig'; + type ReactJSONValue = | string | boolean @@ -466,8 +468,10 @@ export function createServerReference, T>( return callServer(id, args); }; // Expose encoder for use by SSR. - // TODO: Only expose this in SSR builds and not the browser client. - proxy.$$FORM_ACTION = encodeFormAction; + if (usedWithSSR) { + // Only expose this in builds that would actually use it. Not needed on the client. + (proxy: any).$$FORM_ACTION = encodeFormAction; + } knownServerReferences.set(proxy, {id: id, bound: null}); return proxy; } diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.custom.js b/packages/react-client/src/forks/ReactFlightClientConfig.custom.js index 9d00b3afa10a..b5de594d4d46 100644 --- a/packages/react-client/src/forks/ReactFlightClientConfig.custom.js +++ b/packages/react-client/src/forks/ReactFlightClientConfig.custom.js @@ -35,6 +35,7 @@ export const resolveServerReference = $$$config.resolveServerReference; export const preloadModule = $$$config.preloadModule; export const requireModule = $$$config.requireModule; export const dispatchHint = $$$config.dispatchHint; +export const usedWithSSR = true; export opaque type Source = mixed; diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser.js index a51bc8f1c2f7..52212d1e0c86 100644 --- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser.js +++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-browser.js @@ -10,3 +10,4 @@ export * from 'react-client/src/ReactFlightClientConfigBrowser'; export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackBundler'; export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM'; +export const usedWithSSR = false; diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-bun.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-bun.js index 64200788f196..0ad00d57cdac 100644 --- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-bun.js +++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-bun.js @@ -20,3 +20,4 @@ export const resolveClientReference: any = null; export const resolveServerReference: any = null; export const preloadModule: any = null; export const requireModule: any = null; +export const usedWithSSR = true; diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-webpack.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-webpack.js index a51bc8f1c2f7..212290670bd5 100644 --- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-webpack.js +++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-edge-webpack.js @@ -10,3 +10,4 @@ export * from 'react-client/src/ReactFlightClientConfigBrowser'; export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackBundler'; export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM'; +export const usedWithSSR = true; diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js index a51bc8f1c2f7..212290670bd5 100644 --- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js +++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-legacy.js @@ -10,3 +10,4 @@ export * from 'react-client/src/ReactFlightClientConfigBrowser'; export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackBundler'; export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM'; +export const usedWithSSR = true; diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js index a2307ca3155f..a4a68b877317 100644 --- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js +++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-esm.js @@ -11,3 +11,4 @@ export * from 'react-client/src/ReactFlightClientConfigBrowser'; export * from 'react-server-dom-esm/src/ReactFlightClientConfigESMBundler'; export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM'; +export const usedWithSSR = true; diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-webpack.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-webpack.js index 4529bdb4e1fe..4df4617caec6 100644 --- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-webpack.js +++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node-webpack.js @@ -10,3 +10,4 @@ export * from 'react-client/src/ReactFlightClientConfigNode'; export * from 'react-server-dom-webpack/src/ReactFlightClientConfigWebpackBundler'; export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM'; +export const usedWithSSR = true; diff --git a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node.js b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node.js index e4098fad781f..bf0ddb29fa43 100644 --- a/packages/react-client/src/forks/ReactFlightClientConfig.dom-node.js +++ b/packages/react-client/src/forks/ReactFlightClientConfig.dom-node.js @@ -10,3 +10,4 @@ export * from 'react-client/src/ReactFlightClientConfigNode'; export * from 'react-server-dom-webpack/src/ReactFlightClientConfigNodeBundler'; export * from 'react-dom-bindings/src/shared/ReactFlightClientConfigDOM'; +export const usedWithSSR = true; diff --git a/packages/react-server-dom-esm/src/ReactFlightDOMClientNode.js b/packages/react-server-dom-esm/src/ReactFlightDOMClientNode.js index 2ef274f9e5d9..4288d5878a92 100644 --- a/packages/react-server-dom-esm/src/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-esm/src/ReactFlightDOMClientNode.js @@ -21,6 +21,8 @@ import { close, } from 'react-client/src/ReactFlightClient'; +import {createServerReference as createServerReferenceImpl} from 'react-client/src/ReactFlightReplyClient'; + function noServerCall() { throw new Error( 'Server Functions cannot be called during initial render. ' + @@ -33,7 +35,7 @@ export function createServerReference, T>( id: any, callServer: any, ): (...A) => Promise { - return noServerCall; + return createServerReferenceImpl(id, noServerCall); } function createFromNodeStream( diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMClientEdge.js b/packages/react-server-dom-webpack/src/ReactFlightDOMClientEdge.js index fc3b4cfa375e..d9ce8f35a526 100644 --- a/packages/react-server-dom-webpack/src/ReactFlightDOMClientEdge.js +++ b/packages/react-server-dom-webpack/src/ReactFlightDOMClientEdge.js @@ -21,6 +21,8 @@ import { close, } from 'react-client/src/ReactFlightClient'; +import {createServerReference as createServerReferenceImpl} from 'react-client/src/ReactFlightReplyClient'; + function noServerCall() { throw new Error( 'Server Functions cannot be called during initial render. ' + @@ -33,7 +35,7 @@ export function createServerReference, T>( id: any, callServer: any, ): (...A) => Promise { - return noServerCall; + return createServerReferenceImpl(id, noServerCall); } export type Options = { diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMClientNode.js b/packages/react-server-dom-webpack/src/ReactFlightDOMClientNode.js index de4734d38fcc..c6a14fb6b20e 100644 --- a/packages/react-server-dom-webpack/src/ReactFlightDOMClientNode.js +++ b/packages/react-server-dom-webpack/src/ReactFlightDOMClientNode.js @@ -23,6 +23,8 @@ import { close, } from 'react-client/src/ReactFlightClient'; +import {createServerReference as createServerReferenceImpl} from 'react-client/src/ReactFlightReplyClient'; + function noServerCall() { throw new Error( 'Server Functions cannot be called during initial render. ' + @@ -35,7 +37,7 @@ export function createServerReference, T>( id: any, callServer: any, ): (...A) => Promise { - return noServerCall; + return createServerReferenceImpl(id, noServerCall); } function createFromNodeStream( diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js index 51d208bce3eb..e3bdba6de901 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMForm-test.js @@ -17,6 +17,10 @@ global.ReadableStream = global.TextEncoder = require('util').TextEncoder; global.TextDecoder = require('util').TextDecoder; +// Don't wait before processing work on the server. +// TODO: we can replace this with FlightServer.act(). +global.setTimeout = cb => cb(); + let container; let serverExports; let webpackServerMap; @@ -25,16 +29,16 @@ let ReactDOMServer; let ReactServerDOMServer; let ReactServerDOMClient; -describe('ReactFlightDOMReply', () => { +describe('ReactFlightDOMForm', () => { beforeEach(() => { jest.resetModules(); const WebpackMock = require('./utils/WebpackMock'); serverExports = WebpackMock.serverExports; webpackServerMap = WebpackMock.webpackServerMap; React = require('react'); - ReactServerDOMServer = require('react-server-dom-webpack/server.browser'); - ReactServerDOMClient = require('react-server-dom-webpack/client'); - ReactDOMServer = require('react-dom/server.browser'); + ReactServerDOMServer = require('react-server-dom-webpack/server.edge'); + ReactServerDOMClient = require('react-server-dom-webpack/client.edge'); + ReactDOMServer = require('react-dom/server.edge'); container = document.createElement('div'); document.body.appendChild(container); });