ReactJS: React attempted to reuse markup in a container but the checksum was invalid error

Question

I am trying to insert a javascript embed that will load an external script. I am doing it like this:

class Live extends Component {

    componentWillMount() {
        this.setState({ stream: '<script src="https://content.jwplatform.com/players/CcXHdSyi-r6Pl0rxU.js"></script>' });
    }

    render() {
        return (
            <div>
                <div contentEditable='true' dangerouslySetInnerHTML={{ __html: this.state.stream }}></div>
            </div>
        );
    }

}

The error I am getting is:

warning.js?85a7:35 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server: (client) " data-reactid="1">

Why is this happening?

Answer 1

You get pretty extensive answer by React ;)

...you are using server rendering and the markup generated on the server was not what the client was expecting

This is not an error but warning. At first html markup is generated on Node server and then sent to the browser. Then in browser react renders page again and tries to reuse markup that has already been sent by a server. If there are differences between them - it prints this warning and uses markup generated on client disregarding what has been sent by server.

React injected new markup to compensate which works but you have lost many of the benefits of server rendering.

I'm not sure but if you change componentDidMount to componentWillMount then it may help, as because your script tag will get set on the server as well.

If you are not sure how to properly deal with this I advice you to use library like react-helmet which deals with cases like this. Or maybe you are using Next.js? they have their own way to do it.

Answer 2

Try

componentWillMount() {
 this.setState(
    { stream: require( '/path/to/your/script/players/CcXHdSyi-r6Pl0rxU'),
 }); }