Fix false positive <noscript> rehydration text difference warning in React 16 (#11157)

gaearon · web-flow · commit e5db5302ac76 · 2017-10-10T19:35:43.000+01:00
* Add <noscript> with HTML in it to SSR fixture * Wrap <noscript> into a <div> to get its "client HTML" * Revert "Wrap <noscript> into a <div> to get its "client HTML"" This reverts commit 27a4250. * Always use parent.ownerDocument
diff --git a/fixtures/ssr/src/components/Chrome.js b/fixtures/ssr/src/components/Chrome.js
@@ -15,6 +15,11 @@ export default class Chrome extends Component {
           <title>{this.props.title}</title>
         </head>
         <body>
+          <noscript
+            dangerouslySetInnerHTML={{
+              __html: `<b>Enable JavaScript to run this app.</b>`,
+            }}
+          />
           {this.props.children}
           <script
             dangerouslySetInnerHTML={{
diff --git a/src/renderers/dom/fiber/ReactDOMFiberComponent.js b/src/renderers/dom/fiber/ReactDOMFiberComponent.js
@@ -164,17 +164,16 @@ if (__DEV__) {
     );
   };
 
-  var testDocument;
   // Parse the HTML and read it back to normalize the HTML string so that it
   // can be used for comparison.
   var normalizeHTML = function(parent: Element, html: string) {
-    if (!testDocument) {
-      // The title argument is required in IE11 so we pass an empty string.
-      testDocument = document.implementation.createHTMLDocument('');
-    }
+    // We could have created a separate document here to avoid
+    // re-initializing custom elements if they exist. But this breaks
+    // how <noscript> is being handled. So we use the same document.
+    // See the discussion in https://github.com/facebook/react/pull/11157.
     var testElement = parent.namespaceURI === HTML_NAMESPACE
-      ? testDocument.createElement(parent.tagName)
-      : testDocument.createElementNS(
+      ? parent.ownerDocument.createElement(parent.tagName)
+      : parent.ownerDocument.createElementNS(
           (parent.namespaceURI: any),
           parent.tagName,
         );
