Error rendering React.js using JVM Nashorn (Play Framework). I get "null is not a function"

Question

I've been going through this tutorial: http://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/, and run into an issue when rendering React on the JVM using Nashorn.

My App.js file is as follows. It works correctly when running it on the client. Gives an error just when using Nashorn/JVM:

var App = React.createClass({
  getInitialState: function(){
    return {
      name: 'Tyler McGinnis',
      friends: ['Jake Lingwall', 'Murphy Randall', 'Merrick Christensen'],
    }
  },
  addFriend: function(friend){
    this.setState({
      friends: this.state.friends.concat([friend])
    });
  },
  render: function(){
    return (
      <div>
        <h3> Name: {this.state.name} </h3>
        <AddFriend addNew={this.addFriend} />
        <ShowList names={this.state.friends} />
      </div>
    )
  }
});

var AddFriend = React.createClass({
  getInitialState: function(){
    return {
      newFriend: ''
    }
  },
  updateNewFriend: function(e){
    this.setState({
      newFriend: e.target.value
    });
  },
  handleAddNew: function(){
    this.props.addNew(this.state.newFriend);
    this.setState({
      newFriend: ''
    });
  },
  render: function(){
    return (
        <div>
          <input type="text" value={this.state.newFriend} onChange={this.updateNewFriend} />
          <button onClick={this.handleAddNew}> Add Friend </button>
        </div>
    );
  }
});

var ShowList = React.createClass({
  render: function(){
    var listItems = this.props.names.map(function(friend){
      return <li> {friend} </li>;
    });
    return (
      <div>
        <h3> Friends </h3>
        <ul>
          {listItems}
        </ul>
      </div>
    )
  }
});

My JVM code:

ScriptEngine engine = new ScriptEngineManager(null).getEngineByName("nashorn");

String script = "var global = this;" +
    "console = {log: print, warn: print, error: print};";

engine.eval (script);

// Evaluate React and the application code.
engine.eval(new FileReader("target/web/web-modules/main/webjars/lib/react/react-with-addons.js"));
engine.eval(new FileReader("target/web/public/main/javascripts/components/App.js"));
html = engine.eval("React.renderToString(React.createElement(App));").toString();

When I run this code, I get the follow stack trace error:

Warning: ReactDOMButton(...): No `render` method found on the returned component instance: you may have forgotten to define `render` in your component or you may have accidentally tried to render an element whose type is a function that isn't a React component.
Warning: getInitialState was defined on ReactDOMButton, a plain JavaScript class. This is only supported for classes created using React.createClass. Did you mean to define a state property instead?
javax.script.ScriptException: TypeError: null is not a function in <eval> at line number 7395
    at jdk.nashorn.api.scripting.NashornScriptEngine.throwAsScriptException(NashornScriptEngine.java:586)
    at jdk.nashorn.api.scripting.NashornScriptEngine.evalImpl(NashornScriptEngine.java:570)
    at jdk.nashorn.api.scripting.NashornScriptEngine.evalImpl(NashornScriptEngine.java:525)
    at jdk.nashorn.api.scripting.NashornScriptEngine.evalImpl(NashornScriptEngine.java:521)
    at jdk.nashorn.api.scripting.NashornScriptEngine.eval(NashornScriptEngine.java:192)
    at javax.script.AbstractScriptEngine.eval(AbstractScriptEngine.java:264)
    at controllers.Application.index(Application.java:50)
    at Routes$$anonfun$routes$1$$anonfun$applyOrElse$1$$anonfun$apply$1.apply(routes_routing.scala:80)
    at Routes$$anonfun$routes$1$$anonfun$applyOrElse$1$$anonfun$apply$1.apply(routes_routing.scala:80)
    at play.core.Router$HandlerInvokerFactory$$anon$4.resultCall(Router.scala:264)
    at play.core.Router$HandlerInvokerFactory$JavaActionInvokerFactory$$anon$15$$anon$1.invocation(Router.scala:255)
    at play.core.j.JavaAction$$anon$1.call(JavaAction.scala:55)
    at play.core.j.JavaAction$$anonfun$11.apply(JavaAction.scala:82)
    at play.core.j.JavaAction$$anonfun$11.apply(JavaAction.scala:82)
    at scala.concurrent.impl.Future$PromiseCompletingRunnable.liftedTree1$1(Future.scala:24)
    at scala.concurrent.impl.Future$PromiseCompletingRunnable.run(Future.scala:24)
    at play.core.j.HttpExecutionContext$$anon$2.run(HttpExecutionContext.scala:40)
    at play.api.libs.iteratee.Execution$trampoline$.execute(Execution.scala:46)
    at play.core.j.HttpExecutionContext.execute(HttpExecutionContext.scala:32)
    at scala.concurrent.impl.Future$.apply(Future.scala:31)
    at scala.concurrent.Future$.apply(Future.scala:485)
    at play.core.j.JavaAction$class.apply(JavaAction.scala:82)
    at play.core.Router$HandlerInvokerFactory$JavaActionInvokerFactory$$anon$15$$anon$1.apply(Router.scala:252)
    at play.api.mvc.Action$$anonfun$apply$1$$anonfun$apply$4$$anonfun$apply$5.apply(Action.scala:130)
    at play.api.mvc.Action$$anonfun$apply$1$$anonfun$apply$4$$anonfun$apply$5.apply(Action.scala:130)
    at play.utils.Threads$.withContextClassLoader(Threads.scala:21)
    at play.api.mvc.Action$$anonfun$apply$1$$anonfun$apply$4.apply(Action.scala:129)
    at play.api.mvc.Action$$anonfun$apply$1$$anonfun$apply$4.apply(Action.scala:128)
    at scala.Option.map(Option.scala:145)
    at play.api.mvc.Action$$anonfun$apply$1.apply(Action.scala:128)
    at play.api.mvc.Action$$anonfun$apply$1.apply(Action.scala:121)
    at play.api.libs.iteratee.Iteratee$$anonfun$mapM$1.apply(Iteratee.scala:483)
    at play.api.libs.iteratee.Iteratee$$anonfun$mapM$1.apply(Iteratee.scala:483)
    at play.api.libs.iteratee.Iteratee$$anonfun$flatMapM$1.apply(Iteratee.scala:519)
    at play.api.libs.iteratee.Iteratee$$anonfun$flatMapM$1.apply(Iteratee.scala:519)
    at play.api.libs.iteratee.Iteratee$$anonfun$flatMap$1$$anonfun$apply$14.apply(Iteratee.scala:496)
    at play.api.libs.iteratee.Iteratee$$anonfun$flatMap$1$$anonfun$apply$14.apply(Iteratee.scala:496)
    at scala.concurrent.impl.Future$PromiseCompletingRunnable.liftedTree1$1(Future.scala:24)
    at scala.concurrent.impl.Future$PromiseCompletingRunnable.run(Future.scala:24)
    at akka.dispatch.TaskInvocation.run(AbstractDispatcher.scala:41)
    at akka.dispatch.ForkJoinExecutorConfigurator$AkkaForkJoinTask.exec(AbstractDispatcher.scala:393)
    at scala.concurrent.forkjoin.ForkJoinTask.doExec(ForkJoinTask.java:260)
    at scala.concurrent.forkjoin.ForkJoinPool$WorkQueue.runTask(ForkJoinPool.java:1339)
    at scala.concurrent.forkjoin.ForkJoinPool.runWorker(ForkJoinPool.java:1979)
    at scala.concurrent.forkjoin.ForkJoinWorkerThread.run(ForkJoinWorkerThread.java:107)
Caused by: <eval>:7395 TypeError: null is not a function
    at jdk.nashorn.internal.runtime.ECMAErrors.error(ECMAErrors.java:58)
    at jdk.nashorn.internal.runtime.ECMAErrors.typeError(ECMAErrors.java:214)
    at jdk.nashorn.internal.runtime.ECMAErrors.typeError(ECMAErrors.java:186)
    at jdk.nashorn.internal.runtime.ECMAErrors.typeError(ECMAErrors.java:173)
    at jdk.nashorn.internal.runtime.linker.NashornBottomLinker.linkNull(NashornBottomLinker.java:176)
    at jdk.nashorn.internal.runtime.linker.NashornBottomLinker.getGuardedInvocation(NashornBottomLinker.java:66)
    at jdk.internal.dynalink.support.CompositeGuardingDynamicLinker.getGuardedInvocation(CompositeGuardingDynamicLinker.java:124)
    at jdk.internal.dynalink.support.LinkerServicesImpl.getGuardedInvocation(LinkerServicesImpl.java:144)
    at jdk.internal.dynalink.DynamicLinker.relink(DynamicLinker.java:232)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$8.L:4-1$L:6628$L:7393(<eval>:7395)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$8.L:4-1$L:6628$L:7412(<eval>:7421)
    at jdk.nashorn.internal.runtime.ScriptFunctionData.invoke(ScriptFunctionData.java:535)
    at jdk.nashorn.internal.runtime.ScriptFunction.invoke(ScriptFunction.java:209)
    at jdk.nashorn.internal.runtime.ScriptRuntime.apply(ScriptRuntime.java:378)
    at jdk.nashorn.internal.objects.NativeFunction.apply(NativeFunction.java:130)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:13839$L:13899$L:13902(<eval>:13909)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$8.L:4-1$L:6628$L:6750(<eval>:6855)
    at jdk.nashorn.internal.runtime.ScriptFunctionData.invoke(ScriptFunctionData.java:541)
    at jdk.nashorn.internal.runtime.ScriptFunction.invoke(ScriptFunction.java:209)
    at jdk.nashorn.internal.runtime.ScriptRuntime.apply(ScriptRuntime.java:378)
    at jdk.nashorn.internal.objects.NativeFunction.apply(NativeFunction.java:130)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:13839$L:13899$L:13902(<eval>:13909)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:14682$L:14719(<eval>:14720)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$14.L:4-1$L:13161$L:13341(<eval>:13353)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$9.L:4-1$L:7866$L:8127(<eval>:8153)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$9.L:4-1$L:7866$L:8057(<eval>:8063)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:14682$L:14719(<eval>:14720)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$8.L:4-1$L:6628$L:6750(<eval>:6869)
    at jdk.nashorn.internal.runtime.ScriptFunctionData.invoke(ScriptFunctionData.java:541)
    at jdk.nashorn.internal.runtime.ScriptFunction.invoke(ScriptFunction.java:209)
    at jdk.nashorn.internal.runtime.ScriptRuntime.apply(ScriptRuntime.java:378)
    at jdk.nashorn.internal.objects.NativeFunction.apply(NativeFunction.java:130)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:13839$L:13899$L:13902(<eval>:13909)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:14682$L:14719(<eval>:14720)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$8.L:4-1$L:6628$L:6750(<eval>:6869)
    at jdk.nashorn.internal.runtime.ScriptFunctionData.invoke(ScriptFunctionData.java:541)
    at jdk.nashorn.internal.runtime.ScriptFunction.invoke(ScriptFunction.java:209)
    at jdk.nashorn.internal.runtime.ScriptRuntime.apply(ScriptRuntime.java:378)
    at jdk.nashorn.internal.objects.NativeFunction.apply(NativeFunction.java:130)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:13839$L:13899$L:13902(<eval>:13909)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:14682$L:14719(<eval>:14720)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$14.L:4-1$L:13161$L:13341(<eval>:13353)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$9.L:4-1$L:7866$L:8127(<eval>:8153)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$9.L:4-1$L:7866$L:8057(<eval>:8063)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:14682$L:14719(<eval>:14720)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$8.L:4-1$L:6628$L:6750(<eval>:6869)
    at jdk.nashorn.internal.runtime.ScriptFunctionData.invoke(ScriptFunctionData.java:541)
    at jdk.nashorn.internal.runtime.ScriptFunction.invoke(ScriptFunction.java:209)
    at jdk.nashorn.internal.runtime.ScriptRuntime.apply(ScriptRuntime.java:378)
    at jdk.nashorn.internal.objects.NativeFunction.apply(NativeFunction.java:130)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:13839$L:13899$L:13902(<eval>:13909)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:14682$L:14719(<eval>:14720)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$8.L:4-1$L:6628$L:6750(<eval>:6869)
    at jdk.nashorn.internal.runtime.ScriptFunctionData.invoke(ScriptFunctionData.java:541)
    at jdk.nashorn.internal.runtime.ScriptFunction.invoke(ScriptFunction.java:209)
    at jdk.nashorn.internal.runtime.ScriptRuntime.apply(ScriptRuntime.java:378)
    at jdk.nashorn.internal.objects.NativeFunction.apply(NativeFunction.java:130)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:13839$L:13899$L:13902(<eval>:13909)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$16.L:4-1$L:14906$renderToString$L:14945(<eval>:14948)
    at jdk.nashorn.internal.runtime.ScriptFunctionData.invoke(ScriptFunctionData.java:535)
    at jdk.nashorn.internal.runtime.ScriptFunction.invoke(ScriptFunction.java:209)
    at jdk.nashorn.internal.runtime.ScriptRuntime.apply(ScriptRuntime.java:378)
    at jdk.nashorn.internal.objects.NativeFunction.call(NativeFunction.java:162)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$19.L:4-1$L:18201$L:18319(<eval>:18335)
    at jdk.nashorn.internal.scripts.Script$\^eval\_$16.L:4-1$L:14906$renderToString(<eval>:14945)
    at jdk.nashorn.internal.scripts.Script$\^eval\_.runScript(<eval>:1)
    at jdk.nashorn.internal.runtime.ScriptFunctionData.invoke(ScriptFunctionData.java:535)
    at jdk.nashorn.internal.runtime.ScriptFunction.invoke(ScriptFunction.java:209)
    at jdk.nashorn.internal.runtime.ScriptRuntime.apply(ScriptRuntime.java:378)
    at jdk.nashorn.api.scripting.NashornScriptEngine.evalImpl(NashornScriptEngine.java:568)
    ... 43 more

If I remove this line:

<button onClick={this.handleAddNew}> Add Friend </button>

from the AddFriend render function, then the error goes away.

EDIT

If I try and print the result of the button element above, by doing the following:

function makeString(button){
    var objStr = '';
    for (var member in button) {
        objStr += (objStr ? ',\n': '')+
            member + ':' + button[member] + '';
    }
    return objStr;
}

var button = React.createElement("button", {onClick: this.handleAddNew}, " Add Friend ")
var bs = makeString(button);
bs += '\n\n*****_owner:\n\n';
bs += makeString(button['_owner']);
bs += '\n\n*****_context:\n\n';
bs += makeString(button['_context']);
bs += '\n\n*****_store:\n\n';
bs += makeString(button['_store']);
bs += '\n\n*****props:\n\n';
bs += makeString(button['props']);
console.log(bs);

I get the following print out: http://pastebin.com/raw.php?i=hEMkN8UP

Answer 1

Answer from here: https://groups.google.com/forum/#!topic/play-framework/Oz8OC_fPdx8

"That's 8u25 apparently. Results with more up-to-date Nashorn versions: throws another exception in 8u40; works totally fine with 8u60 early access release."

I verified that updating to 8u60 fixed the problem on my local machine.