[Flight] Check if a return value is a client reference before introspecting (#29611)
This didn't actually fail before but I'm just adding an extra check. Currently Client References are always "function" proxies so they never fall into this branch. However, we do in theory support objects as client references too depending on environment. We have checks elsewhere. So this just makes that consistent.
Sebastian Markbåge committed
May 28, 2024 at 19:07 UTC
18164761b1ed4a0f70987ef56893285820549460
2 files changed
+31
-1
packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+26
@@ -1828,4 +1828,30 @@ describe('ReactFlightDOM', () => {
1828
);
1829
}
1830
});
1831
+
1832
+ it('should be able to render a client reference as return value', async () => {
1833
+ const ClientModule = clientExports({
1834
+ text: 'Hello World',
1835
+ });
1836
+
1837
+ function ServerComponent() {
1838
+ return ClientModule.text;
1839
+ }
1840
+
1841
+ const {writable, readable} = getTestStream();
1842
+ const {pipe} = ReactServerDOMServer.renderToPipeableStream(
1843
+ <ServerComponent />,
1844
+ webpackMap,
1845
+ );
1846
+ pipe(writable);
1847
+ const response = ReactServerDOMClient.createFromReadableStream(readable);
1848
+
1849
+ const container = document.createElement('div');
1850
+ const root = ReactDOMClient.createRoot(container);
1851
+
1852
+ await act(() => {
1853
+ root.render(response);
1854
+ });
1855
+ expect(container.innerHTML).toBe('Hello World');
1856
+ });
1857
});
packages/react-server/src/ReactFlightServer.js
+5
-1
@@ -1021,7 +1021,11 @@ function renderFunctionComponent<Props>(
1021
const secondArg = undefined;
1022
result = Component(props, secondArg);
1023
}
1024
- if (typeof result === 'object' && result !== null) {
1024
+ if (
1025
+ typeof result === 'object' &&
1026
+ result !== null &&
1027
+ !isClientReference(result)
1028
+ ) {
1029
if (typeof result.then === 'function') {
1030
// When the return value is in children position we can resolve it immediately,
1031
// to its value without a wrapper if it's synchronously available.