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(
+
+ Enable JavaScript to run this app.
+ ,
+ );
+ 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' &&