diff --git a/packages/react-server-dom-esm/src/ReactFlightESMReferences.js b/packages/react-server-dom-esm/src/ReactFlightESMReferences.js index 9a3346c4bf280..cd3dd349157a5 100644 --- a/packages/react-server-dom-esm/src/ReactFlightESMReferences.js +++ b/packages/react-server-dom-esm/src/ReactFlightESMReferences.js @@ -70,8 +70,8 @@ export function registerServerReference( ): ServerReference { return Object.defineProperties((reference: any), { $$typeof: {value: SERVER_REFERENCE_TAG}, - $$id: {value: id + '#' + exportName}, - $$bound: {value: null}, - bind: {value: bind}, + $$id: {value: id + '#' + exportName, configurable: true}, + $$bound: {value: null, configurable: true}, + bind: {value: bind, configurable: true}, }); } diff --git a/packages/react-server-dom-turbopack/src/ReactFlightTurbopackReferences.js b/packages/react-server-dom-turbopack/src/ReactFlightTurbopackReferences.js index f68c6f27f9640..26ee500ce5026 100644 --- a/packages/react-server-dom-turbopack/src/ReactFlightTurbopackReferences.js +++ b/packages/react-server-dom-turbopack/src/ReactFlightTurbopackReferences.js @@ -83,9 +83,12 @@ export function registerServerReference( ): ServerReference { return Object.defineProperties((reference: any), { $$typeof: {value: SERVER_REFERENCE_TAG}, - $$id: {value: exportName === null ? id : id + '#' + exportName}, - $$bound: {value: null}, - bind: {value: bind}, + $$id: { + value: exportName === null ? id : id + '#' + exportName, + configurable: true, + }, + $$bound: {value: null, configurable: true}, + bind: {value: bind, configurable: true}, }); } diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js index f68c6f27f9640..26ee500ce5026 100644 --- a/packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js +++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js @@ -83,9 +83,12 @@ export function registerServerReference( ): ServerReference { return Object.defineProperties((reference: any), { $$typeof: {value: SERVER_REFERENCE_TAG}, - $$id: {value: exportName === null ? id : id + '#' + exportName}, - $$bound: {value: null}, - bind: {value: bind}, + $$id: { + value: exportName === null ? id : id + '#' + exportName, + configurable: true, + }, + $$bound: {value: null, configurable: true}, + bind: {value: bind, configurable: true}, }); } diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js index f8f3a1c3f2877..ce5ad36a9dea2 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js @@ -1078,6 +1078,58 @@ describe('ReactFlightDOMBrowser', () => { } }); + it('can use the same function twice as a server action', async () => { + let actionProxy1; + let actionProxy2; + + function Client({action1, action2}) { + actionProxy1 = action1; + actionProxy2 = action2; + return 'Click Me'; + } + + function greet(text) { + return 'Hello ' + text; + } + + const ServerModule = serverExports({ + greet, + greet2: greet, + }); + const ClientRef = clientExports(Client); + + const stream = ReactServerDOMServer.renderToReadableStream( + , + webpackMap, + ); + + const response = ReactServerDOMClient.createFromReadableStream(stream, { + async callServer(ref, args) { + const body = await ReactServerDOMClient.encodeReply(args); + return callServer(ref, body); + }, + }); + + function App() { + return use(response); + } + + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render(); + }); + expect(container.innerHTML).toBe('Click Me'); + expect(typeof actionProxy1).toBe('function'); + expect(actionProxy1).not.toBe(greet); + + // TODO: Ideally flight would be encoding this the same. + expect(actionProxy1).not.toBe(actionProxy2); + + const result = await actionProxy1('world'); + expect(result).toBe('Hello world'); + }); + it('supports Float hints before the first await in server components in Fiber', async () => { function Component() { return

hello world

;