CODEWITHSUNDEEP
javascriptnode.jsreactjs
Abdul Ahmad
Abdul Ahmad

Reputation: 10021

react attempted to reuse markup error

I'm working with react server-side rendering and I'm getting the error at the bottom of this post. Some context:

I have 2 react components, each in its own folder:

 - react-components
   - component-1-folder
     - component-1
   - component-2-folder
     - component-2

both react components are identical (mostly):

first component

var React = require('react');
var ReactDom = require('react-dom');

var Component = React.createClass({
    render: function() {
        return (
            <div>
                <div className='story-box'>
                    test cg story
                </div>
                <script src="/javascripts/bundle.js"></script>
            </div>      
        );
    }
});

if(typeof window !== 'undefined') {
  window.onload = function() {
    ReactDom.render(<Component/>, document.getElementById('react-test-component-box'));
  }
}

module.exports = Component;

second component

var React = require('react');
var ReactDom = require('react-dom');

var cgStoryBox = React.createClass({
    render: function() {
        return (
            <div>
                <div className='story-box'>
                    hi
                </div>
                <script src="/javascripts/bundle.js"></script>
            </div>      
        );
    }
});
if(typeof window !== 'undefined') {
  window.onload = function() {
    ReactDom.render(<cgStoryBox/>, document.getElementById('react-test-component-box'));
  }
}
module.exports = cgStoryBox;

I'm using browserify to create a build.js file, I'm running the build with npm run build command and updating the path depending on which component I want to render server side (for testing)

"build": "browserify -t reactify react-components/cg-story-box/cg-story.js 
-o ./public/javascripts/bundle.js"

and for some reason, when I try to render one component it works, but when I try to render the second, it doesn't and gives me this error.

short question: Why?

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:

another thing to note:

when I try to render the second component, react literally creates an element cgStoryBox instead of the html in the render method of the component, but with the first component it renders the correct html. what's up with that

Upvotes: 0

Views: 181

Answers (1)

Abdul Ahmad
Abdul Ahmad

Reputation: 10021

unbelievable... it was because the component name was not capitalized... Basically all components have to have capital first letters (this means nested components as well).

I'll keep this here in case someone else has the same issue

Upvotes: -1

Related Questions