noscript contents cause invariant violation

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

I believe this is because, to the JS enabled browser, the noscript content looks like CDATA.

This can be worked around by using dangerouslySetInnerHTML to actually set the contents to an HTML string, however, you can’t nest components with this approach.

[BabakMN]

I think this issue should be highlighted somewhere on the documentation.

The following seems to work well for me both on client and server (thanks to people above):

Noscript.js

import React from 'react';
import ReactDOM from 'react-dom/server';


export default function Noscript(props) {

    // https://github.com/facebook/react/issues/1252

    const staticMarkup = ReactDOM.renderToStaticMarkup(
        props.children
    );

    return <noscript dangerouslySetInnerHTML={{ __html: staticMarkup }} />;

}

Usage:

import Noscript from './Noscript.js';

<Noscript>
   <div className="noJavascript">
      <div>
         <p>
         Your browser has disabled Javascript. Please note this website requires Javsacript to function correctly.
         </p>
      </div>
   </div>
</Noscript>

[matthewwithanm]

Now that we have renderComponentToStaticMarkup, maybe the best solution for this is just to do:

<noscript dangerouslySetInnerHTML={{__html: React.renderComponentToStaticMarkup(c)}} />

where c is the component you want to render for people without JS.