react render error:ReactDOM.render(): Invalid component element

[blueforest]

I render React Component on server side:

1.components.js:

var React = require('react/addons');
var MonitorApp =  React.createClass({...});
module.exports = MonitorApp;

2.appFile/app.js

 var React = require('react/addons');
var ReactApp = require('../components');
var ReactDOM = require('react-dom');
var mountNode = document.getElementById("react-main-mount");

ReactDOM.render(new ReactApp({}), mountNode);

3.gruntFile.js

browserify: {
        dist: {
            files: {
                '<%= srcBase %>/assets/app.js': ['app/appFile/*.js']
            },
            options: {
                transform: ['reactify']
            }
        }
    }

4.html

<div id="react-main-mount">
    {{{reactOutput}}}
</div>

there is a error on browser console like this:

Uncaught Error: Invariant Violation: ReactDOM.render(): Invalid component element. This may be caused by unintentionally loading two independent copies of React.

[leian-ivey]

I'm getting the same error above using gulp.

[johndevor]

Ditto

[johndevor]

Ok, I kind of figured it out. In main.js, change to this line:

ReactDOM.render(<ReactApp />, mountNode);

Not sure exactly why this works, but I got the idea from here:

https://www.bountysource.com/issues/27051749-app-main-js-line-8-react-render-new-reactapp-mountnode

If anybody can explain in further detail that would be appreciated. I'm assuming it's because react >=13.3 treats that differently... or something....

[laran]

That solution worked for me as well.

[jasonmorita]

Still workin' in December 2017