diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js index 39f9cf4c2ad4a..24fc8cd49aeca 100644 --- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js @@ -36,6 +36,7 @@ const { itThrowsWhenRendering, serverRender, streamRender, + clientCleanRender, clientRenderOnServerString, } = ReactDOMServerIntegrationUtils(initModules); @@ -576,6 +577,24 @@ describe('ReactDOMServerIntegration', () => { }, ); + itRenders('a noscript with children', async render => { + const e = await render( + , + ); + if (render === clientCleanRender) { + // On the client we ignore the contents of a noscript + expect(e.childNodes.length).toBe(0); + } else { + // On the server or when hydrating the content should be correct + expect(e.childNodes.length).toBe(1); + expect(e.firstChild.textContent).toBe( + '
Enable JavaScript to run this app.
', + ); + } + }); + describe('newline-eating elements', function() { itRenders( 'a newline-eating tag with content not starting with \\n', diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration.js index 63a0104f0cc60..721071837aab3 100644 --- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration.js +++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration.js @@ -341,4 +341,34 @@ describe('ReactDOMServerHydration', () => { expect(callback).toHaveBeenCalledTimes(0); } }); + + // Regression test for https://github.com/facebook/react/issues/11423 + it('should ignore noscript content on the client and not warn about mismatches', () => { + const callback = jest.fn(); + const TestComponent = ({onRender}) => { + onRender(); + return
Enable JavaScript to run this app.
; + }; + const markup = ( + + ); + + const element = document.createElement('div'); + element.innerHTML = ReactDOMServer.renderToString(markup); + expect(callback).toHaveBeenCalledTimes(1); + expect(element.textContent).toBe( + '
Enable JavaScript to run this app.
', + ); + + // On the client we want to keep the existing markup, but not render the + // actual elements for performance reasons and to avoid for example + // downloading images. This should also not warn for hydration mismatches. + ReactDOM.hydrate(markup, element); + expect(callback).toHaveBeenCalledTimes(1); + expect(element.textContent).toBe( + '
Enable JavaScript to run this app.
', + ); + }); }); diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js index 8a5c0578a8229..8102cd13dd8bb 100644 --- a/packages/react-dom/src/client/ReactDOMHostConfig.js +++ b/packages/react-dom/src/client/ReactDOMHostConfig.js @@ -247,6 +247,7 @@ export function shouldSetTextContent(type: string, props: Props): boolean { return ( type === 'textarea' || type === 'option' || + type === 'noscript' || typeof props.children === 'string' || typeof props.children === 'number' || (typeof props.dangerouslySetInnerHTML === 'object' &&