Kayote Kayote - 6 months ago 23
Node.js Question

Webpack & React With Es2015 Modules via Babel

Im really struggling with Webpack & React. It seems for ages, Node 5.0 was not registering the npm modules I installed in the package.json 'dependencies'.
Today, I upgraded Node to 5.2 and it seems to be chugging along fine now.

However, now Im struggling with getting React code in modules to work.

Webpack doesn't report any error.
Chrome Console says:

"Uncaught Error: Invariant Violation: ReactDOM.render(): Invalid component element." (which is pointing to Main.jsx file).

There is a lot of dependencies & my webpack config is fairly lengthy so I hesitantly post the main.jsx file content here only on SO. The whole repo (with length config files, however, the React code itself is a few lines long) is here on Bitbucket.

main.jsx:

import React from 'react';
import ReactDOM from 'react-dom';
import AppParent from './components/App.jsx';
main ();
function main () {
const app = document.createElement ('div');
document.body.appendChild (app);
ReactDOM.render (AppParent, app);
};


App.jsx:

import React from 'react';
import Topbar from './Topbar.jsx';
export default AppParent;
var AppParent = React.createClass ({
render : function () {
return (
<div className = 'ReactParent'>
</div>
);
}
});

Answer

In the render method you need to render an element:

ReactDOM.render (<AppParent />, app);

You are passing a React component class.