react: 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.

About this issue

Original URL
State: closed
Created 10 years ago
Comments: 18 (8 by maintainers)

Commits related to this issue

Serialize children of noscript tags; fixes GH-1252 — committed to matthewwithanm/react by matthewwithanm 10 years ago

Most upvoted comments

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>

BabakMN on Sep 11, 2016

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.

matthewwithanm on Mar 26, 2014