Search code examples
javareactjsnashorn

Nashhorn ECMAException for renderToString with invalid ReactElememt


  • JDK 8
  • React 0.13.1

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"));

Solution

  • 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.