iframe contents cause invariant violation

[matthewwithanm]

When using server rendering, putting an <img> in an <iframe> seems to invariably cause an invariant violation (it can't find the image).

This is related to #1252, but not identical. In both cases, the browser isn't aware of the inner elements however, in this case, it's because browsers that support iframes are actually mutating the DOM (by replacing the contents with the document specified in the src attribute).

[sophiebits]

@matthewwithanm I'm guessing the IE8 problems you saw in #1327 won't be a problem here -- want to try the same renderToStaticMarkup approach?

[matthewwithanm]

I'm not sure if that really fits here…

With <noscript>, we know that people won't be using JS to control the content (since you could only do so in browsers where it wouldn't be shown). Is that a safe assumption for iframes?

[sophiebits]

Correct me if I'm wrong, but the contents will be used only if the browser doesn't support iframes, which basically all browsers that support JS should?

[matthewwithanm]

I'm not sure how iframe support correlates with JS support (or whether you can disable them).

Does it not matter that the browser changes the content? I would've thought that would trigger an error, even if the elements didn't have React IDs.

[sophiebits]

React shouldn't look inside the iframe unless you change the contents later.

[damusnet]

Hi all,

I also came up with a case of invariant violation of an <iframe /> inside a <noscript />. While trying to use Google Tag Manager (gtm) more specifically. What's interesting is, we didn't see that issue with Next.js 2.x / React 15, and it's only while upgrading to Next.js 4.x / React 16 that it appeared.

Here is how I solved it though:

import { renderToStaticMarkup } from 'react-dom/server';

export const serverGtmNoScript = `<iframe
  src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
  height="0" width="0" style="display:none;visibility:hidden"></iframe>`;

export const clientGtmNoScript = renderToStaticMarkup(serverGtmNoScript);

and in our Layout render function:

<noscript
  dangerouslySetInnerHTML={{
    __html: process.browser ? clientGtmNoScript : serverGtmNoScript,
  }}
/>

Error message for Google Search:

Warning: Prop `dangerouslySetInnerHTML` did not match. Server: "<iframe
src=\"https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX\" height=\"0\" width=\"0\"
style=\"display:none;visibility:hidden\"&gt;&lt;/iframe&gt;" Client: "<iframe
src=\"https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX\" height=\"0\" width=\"0\"
style=\"display:none;visibility:hidden\"></iframe>"

p.s. I am now seeing other invariant warnings with the move to React 16...

[gaearon]

@damusnet The best way to report problems with React 16 is to file new issues. It is likely your problems are entirely unrelated to the issue being discussed here, and because the discussion is buried in a three year old thread, we won’t know about those problems.

[damusnet]

@Gaeron alright, thanks! I wasn't sure this deserved a new issue but I'll open one now.