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

Question

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 like this:

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

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

Rick Jolly
– Rick Jolly

2015-11-05 16:58:17 +00:00
Commented Nov 5, 2015 at 16:58 — Rick Jolly
– Rick Jolly, Commented Nov 5, 2015 at 16:58

Mariano Desanze · Accepted Answer · 2016-03-06 05:01:18Z

You are not showing enough code. If the error happens on client side your HTML must at least contain a script tag to your bundled JS for your component to have any interactivity. And if it happens on server side, then you should post more about how you setup your server (i.e. {{{reactOutput}}} is not really HTML, your are using a template system or what?)

But I would guess is client side error from the error you are getting, and that you are probably including the React library in the HTML (<script src=".../react.js">) while your current gruntFile is making Browserify to generate the JS file with the entire React library inside. So that is why the error is saying you have 2 copies of React.

If that's the case, you have 2 options to fix the problem (choose only one):

Remove the <script src=".../react.js"> from your html.

In your gruntFile.js use browserify's external option to exclude React from your JS bundle:

browserify: {
  dist: {
    ...
    options: {
      transform: ['reactify'],
      external: ['react/addons']
    }
  }
}

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related