{"parents":["0ca3deebcf20d2514771a568e1be08801da5cf85"],"patch":"diff --git a\/packages\/react-client\/src\/ReactFlightReplyClient.js b\/packages\/react-client\/src\/ReactFlightReplyClient.js\nindex 3fa37cd00c..e3c4ec20ba 100644\n--- a\/packages\/react-client\/src\/ReactFlightReplyClient.js\n+++ b\/packages\/react-client\/src\/ReactFlightReplyClient.js\n@@ -63,10 +63,14 @@ export type EncodeFormActionCallback = (\n \n export type ServerReferenceId = any;\n \n-const knownServerReferences: WeakMap<\n- Function,\n- {id: ServerReferenceId, bound: null | Thenable>},\n-> = new WeakMap();\n+type ServerReferenceClosure = {\n+ id: ServerReferenceId,\n+ originalBind: Function,\n+ bound: null | Thenable>,\n+};\n+\n+const knownServerReferences: WeakMap =\n+ new WeakMap();\n \n \/\/ Serializable values\n export type ReactServerValue =\n@@ -760,16 +764,17 @@ export function processReply(\n }\n \n if (typeof value === 'function') {\n- const metaData = knownServerReferences.get(value);\n- if (metaData !== undefined) {\n- const metaDataJSON = JSON.stringify(metaData, resolveToJSON);\n+ const referenceClosure = knownServerReferences.get(value);\n+ if (referenceClosure !== undefined) {\n+ const {id, bound} = referenceClosure;\n+ const referenceClosureJSON = JSON.stringify({id, bound}, resolveToJSON);\n if (formData === null) {\n \/\/ Upgrade to use FormData to allow us to stream this value.\n formData = new FormData();\n }\n \/\/ The reference to this function came from the same client so we can pass it back.\n const refId = nextPartId++;\n- formData.set(formFieldPrefix + refId, metaDataJSON);\n+ formData.set(formFieldPrefix + refId, referenceClosureJSON);\n return serializeServerReferenceID(refId);\n }\n if (temporaryReferences !== undefined && key.indexOf(':') === -1) {\n@@ -864,7 +869,7 @@ export function processReply(\n }\n \n const boundCache: WeakMap<\n- {id: ServerReferenceId, bound: null | Thenable>},\n+ ServerReferenceClosure,\n Thenable,\n > = new WeakMap();\n \n@@ -905,8 +910,8 @@ function defaultEncodeFormAction(\n this: any => Promise,\n identifierPrefix: string,\n ): ReactCustomFormAction {\n- const reference = knownServerReferences.get(this);\n- if (!reference) {\n+ const referenceClosure = knownServerReferences.get(this);\n+ if (!referenceClosure) {\n throw new Error(\n 'Tried to encode a Server Action from a different instance than the encoder is from. ' +\n 'This is a bug in React.',\n@@ -914,12 +919,13 @@ function defaultEncodeFormAction(\n }\n let data: null | FormData = null;\n let name;\n- const boundPromise = reference.bound;\n+ const boundPromise = referenceClosure.bound;\n if (boundPromise !== null) {\n- let thenable = boundCache.get(reference);\n+ let thenable = boundCache.get(referenceClosure);\n if (!thenable) {\n- thenable = encodeFormData(reference);\n- boundCache.set(reference, thenable);\n+ const {id, bound} = referenceClosure;\n+ thenable = encodeFormData({id, bound});\n+ boundCache.set(referenceClosure, thenable);\n }\n if (thenable.status === 'rejected') {\n throw thenable.reason;\n@@ -941,7 +947,7 @@ function defaultEncodeFormAction(\n name = '$ACTION_REF_' + identifierPrefix;\n } else {\n \/\/ This is the simple case so we can just encode the ID.\n- name = '$ACTION_ID_' + reference.id;\n+ name = '$ACTION_ID_' + referenceClosure.id;\n }\n return {\n name: name,\n@@ -952,22 +958,22 @@ function defaultEncodeFormAction(\n }\n \n function customEncodeFormAction(\n- proxy: any => Promise,\n+ reference: any => Promise,\n identifierPrefix: string,\n encodeFormAction: EncodeFormActionCallback,\n ): ReactCustomFormAction {\n- const reference = knownServerReferences.get(proxy);\n- if (!reference) {\n+ const referenceClosure = knownServerReferences.get(reference);\n+ if (!referenceClosure) {\n throw new Error(\n 'Tried to encode a Server Action from a different instance than the encoder is from. ' +\n 'This is a bug in React.',\n );\n }\n- let boundPromise: Promise> = (reference.bound: any);\n+ let boundPromise: Promise> = (referenceClosure.bound: any);\n if (boundPromise === null) {\n boundPromise = Promise.resolve([]);\n }\n- return encodeFormAction(reference.id, boundPromise);\n+ return encodeFormAction(referenceClosure.id, boundPromise);\n }\n \n function isSignatureEqual(\n@@ -975,19 +981,19 @@ function isSignatureEqual(\n referenceId: ServerReferenceId,\n numberOfBoundArgs: number,\n ): boolean {\n- const reference = knownServerReferences.get(this);\n- if (!reference) {\n+ const referenceClosure = knownServerReferences.get(this);\n+ if (!referenceClosure) {\n throw new Error(\n 'Tried to encode a Server Action from a different instance than the encoder is from. ' +\n 'This is a bug in React.',\n );\n }\n- if (reference.id !== referenceId) {\n+ if (referenceClosure.id !== referenceId) {\n \/\/ These are different functions.\n return false;\n }\n \/\/ Now check if the number of bound arguments is the same.\n- const boundPromise = reference.bound;\n+ const boundPromise = referenceClosure.bound;\n if (boundPromise === null) {\n \/\/ No bound arguments.\n return numberOfBoundArgs === 0;\n@@ -1131,10 +1137,20 @@ export function registerBoundServerReference(\n bound: null | Thenable>,\n encodeFormAction: void | EncodeFormActionCallback,\n ): void {\n+ if (knownServerReferences.has(reference)) {\n+ return;\n+ }\n+\n+ knownServerReferences.set(reference, {\n+ id,\n+ originalBind: reference.bind,\n+ bound,\n+ });\n+\n \/\/ Expose encoder for use by SSR, as well as a special bind that can be used to\n \/\/ keep server capabilities.\n if (usedWithSSR) {\n- \/\/ Only expose this in builds that would actually use it. Not needed on the client.\n+ \/\/ Only expose this in builds that would actually use it. Not needed in the browser.\n const $$FORM_ACTION =\n encodeFormAction === undefined\n ? defaultEncodeFormAction\n@@ -1154,7 +1170,6 @@ export function registerBoundServerReference(\n bind: {value: bind},\n });\n }\n- knownServerReferences.set(reference, {id, bound});\n }\n \n export function registerServerReference(\n@@ -1171,43 +1186,54 @@ const FunctionBind = Function.prototype.bind;\n \/\/ $FlowFixMe[method-unbinding]\n const ArraySlice = Array.prototype.slice;\n function bind(this: Function): Function {\n- \/\/ $FlowFixMe[unsupported-syntax]\n- \/\/ $FlowFixMe[prop-missing]\n- const newFn = FunctionBind.apply(this, arguments);\n- const reference = knownServerReferences.get(this);\n- if (reference) {\n- if (__DEV__) {\n- const thisBind = arguments[0];\n- if (thisBind != null) {\n- \/\/ This doesn't warn in browser environments since it's not instrumented outside\n- \/\/ usedWithSSR. This makes this an SSR only warning which we don't generally do.\n- \/\/ TODO: Consider a DEV only instrumentation in the browser.\n- console.error(\n- 'Cannot bind \"this\" of a Server Action. Pass null or undefined as the first argument to .bind().',\n- );\n- }\n- }\n- const args = ArraySlice.call(arguments, 1);\n- let boundPromise = null;\n- if (reference.bound !== null) {\n- boundPromise = Promise.resolve((reference.bound: any)).then(boundArgs =>\n- boundArgs.concat(args),\n+ const referenceClosure = knownServerReferences.get(this);\n+\n+ if (!referenceClosure) {\n+ \/\/ $FlowFixMe[prop-missing]\n+ return FunctionBind.apply(this, arguments);\n+ }\n+\n+ const newFn = referenceClosure.originalBind.apply(this, arguments);\n+\n+ if (__DEV__) {\n+ const thisBind = arguments[0];\n+ if (thisBind != null) {\n+ \/\/ This doesn't warn in browser environments since it's not instrumented outside\n+ \/\/ usedWithSSR. This makes this an SSR only warning which we don't generally do.\n+ \/\/ TODO: Consider a DEV only instrumentation in the browser.\n+ console.error(\n+ 'Cannot bind \"this\" of a Server Action. Pass null or undefined as the first argument to .bind().',\n );\n- } else {\n- boundPromise = Promise.resolve(args);\n- }\n- \/\/ Expose encoder for use by SSR, as well as a special bind that can be used to\n- \/\/ keep server capabilities.\n- if (usedWithSSR) {\n- \/\/ Only expose this in builds that would actually use it. Not needed on the client.\n- Object.defineProperties((newFn: any), {\n- $$FORM_ACTION: {value: this.$$FORM_ACTION},\n- $$IS_SIGNATURE_EQUAL: {value: isSignatureEqual},\n- bind: {value: bind},\n- });\n }\n- knownServerReferences.set(newFn, {id: reference.id, bound: boundPromise});\n }\n+\n+ const args = ArraySlice.call(arguments, 1);\n+ let boundPromise = null;\n+ if (referenceClosure.bound !== null) {\n+ boundPromise = Promise.resolve((referenceClosure.bound: any)).then(\n+ boundArgs => boundArgs.concat(args),\n+ );\n+ } else {\n+ boundPromise = Promise.resolve(args);\n+ }\n+\n+ knownServerReferences.set(newFn, {\n+ id: referenceClosure.id,\n+ originalBind: newFn.bind,\n+ bound: boundPromise,\n+ });\n+\n+ \/\/ Expose encoder for use by SSR, as well as a special bind that can be used to\n+ \/\/ keep server capabilities.\n+ if (usedWithSSR) {\n+ \/\/ Only expose this in builds that would actually use it. Not needed on the client.\n+ Object.defineProperties((newFn: any), {\n+ $$FORM_ACTION: {value: this.$$FORM_ACTION},\n+ $$IS_SIGNATURE_EQUAL: {value: isSignatureEqual},\n+ bind: {value: bind},\n+ });\n+ }\n+\n return newFn;\n }\n \ndiff --git a\/packages\/react-server-dom-webpack\/src\/__tests__\/ReactFlightDOMEdge-test.js b\/packages\/react-server-dom-webpack\/src\/__tests__\/ReactFlightDOMEdge-test.js\nindex 5d3af9d411..30b8e17145 100644\n--- a\/packages\/react-server-dom-webpack\/src\/__tests__\/ReactFlightDOMEdge-test.js\n+++ b\/packages\/react-server-dom-webpack\/src\/__tests__\/ReactFlightDOMEdge-test.js\n@@ -309,6 +309,13 @@ describe('ReactFlightDOMEdge', () => {\n greet,\n });\n \n+ \/\/ Registering the server reference also with the client must not break\n+ \/\/ subsequent `.bind` calls.\n+ ReactServerDOMClient.registerServerReference(\n+ ServerModule.greet,\n+ ServerModule.greet.$$id,\n+ );\n+\n const stream = await serverAct(() =>\n ReactServerDOMServer.renderToReadableStream(\n {\n","files":[{"status":"M","path":"packages\/react-client\/src\/ReactFlightReplyClient.js"},{"status":"M","path":"packages\/react-server-dom-webpack\/src\/__tests__\/ReactFlightDOMEdge-test.js"}],"commit":{"authorName":"Hendrik Liebau","authorEmail":"mail@hendrik-liebau.de","authoredAt":"2025-03-11T22:15:38+01:00","subject":"[Flight]: Client-side `registerServerReference` must not break `.bind()` (#32565)","shortRevision":"2398554c60","revision":"2398554c6034e6d0992fcaa1c2e95f1757cab53e"},"body":""}

dillon1000/react

Files changed