Getting the following error when using Nashorn to render a ReactJS component
Error: Invariant Violation: renderToString(): You must pass a valid ReactElement.
component.js
var Controller = React.createClass({
render: function() {
return (React.createElement("div",null,"Hello, World!"));
}
});
var renderEventsComponentServer = function (eventList) {
return React.renderToString(Controller);
};
From Java
Object html = nashorn.invokeFunction("renderEventsComponentServer", events);
This however works fine
var renderEventsComponentServer = function (eventList) {
return React.renderToString(React.createElement("div",null,"Hello, World!"));
};
With result
<div data-reactid=".19jt6qowty6" data-react-checksum="-706801283">Hello, World!</div>
I'm obviously missing something fundamental about how ReactJS/Nashorns works.
These are the JS files being loaded
nashorn.eval(read("assets/js/react.js"));
nashorn.eval(read("assets/js/react-dom.js"));
nashorn.eval(read("assets/js/babel.min.js"));
nashorn.eval(read("assets/js/axios.js"));
nashorn.eval(read("assets/js/nashorn-polyfill.js"));
nashorn.eval(read("assets/js/events.js"));
Using
return React.renderToString(React.createElement(Controller, null));
instead of
return React.renderToString(Controller);
did the trick.
component.js
var Controller = React.createClass({
render: function() {
return (React.createElement("div",null,"Hello, World!"));
}
});
var renderEventsComponentServer = function (eventList) {
return React.renderToString(React.createElement(Controller, null));
};
Nugget of info:
When I started trying to use ReactJS with Nashorn for SSR I downloaded the latest version of ReactJS which was throwing lots of errors, some deprecations that were removed altogether. I'm now using 0.13.1 which seems to be working as expected.