title: Error rendering React.js using JVM Nashorn (Play Framework). I get "null is not a function"
body: <p>I've been going through this tutorial: <a href="http://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/" rel="noreferrer">http://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/</a>, and run into an issue when rendering React on the JVM using Nashorn.</p>
  
  <p>My App.js file is as follows. It works correctly when running it on the client. Gives an error just when using Nashorn/JVM:</p>
  
  <pre><code>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 (
        &lt;div&gt;
          &lt;h3&gt; Name: {this.state.name} &lt;/h3&gt;
          &lt;AddFriend addNew={this.addFriend} /&gt;
          &lt;ShowList names={this.state.friends} /&gt;
        &lt;/div&gt;
      )
    }
  });
  
  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 (
          &lt;div&gt;
            &lt;input type="text" value={this.state.newFriend} onChange={this.updateNewFriend} /&gt;
            &lt;button onClick={this.handleAddNew}&gt; Add Friend &lt;/button&gt;
          &lt;/div&gt;
      );
    }
  });
  
  var ShowList = React.createClass({
    render: function(){
      var listItems = this.props.names.map(function(friend){
        return &lt;li&gt; {friend} &lt;/li&gt;;
      });
      return (
        &lt;div&gt;
          &lt;h3&gt; Friends &lt;/h3&gt;
          &lt;ul&gt;
            {listItems}
          &lt;/ul&gt;
        &lt;/div&gt;
      )
    }
  });
  </code></pre>
  
  <p>My JVM code:</p>
  
  <pre><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();
  </code></pre>
  
  <p>When I run this code, I get the follow stack trace error:</p>
  
  <pre><code>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 &lt;eval&gt; 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: &lt;eval&gt;: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(&lt;eval&gt;:7395)
      at jdk.nashorn.internal.scripts.Script$\^eval\_$8.L:4-1$L:6628$L:7412(&lt;eval&gt;: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(&lt;eval&gt;:13909)
      at jdk.nashorn.internal.scripts.Script$\^eval\_$8.L:4-1$L:6628$L:6750(&lt;eval&gt;: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(&lt;eval&gt;:13909)
      at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:14682$L:14719(&lt;eval&gt;:14720)
      at jdk.nashorn.internal.scripts.Script$\^eval\_$14.L:4-1$L:13161$L:13341(&lt;eval&gt;:13353)
      at jdk.nashorn.internal.scripts.Script$\^eval\_$9.L:4-1$L:7866$L:8127(&lt;eval&gt;:8153)
      at jdk.nashorn.internal.scripts.Script$\^eval\_$9.L:4-1$L:7866$L:8057(&lt;eval&gt;:8063)
      at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:14682$L:14719(&lt;eval&gt;:14720)
      at jdk.nashorn.internal.scripts.Script$\^eval\_$8.L:4-1$L:6628$L:6750(&lt;eval&gt;: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(&lt;eval&gt;:13909)
      at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:14682$L:14719(&lt;eval&gt;:14720)
      at jdk.nashorn.internal.scripts.Script$\^eval\_$8.L:4-1$L:6628$L:6750(&lt;eval&gt;: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(&lt;eval&gt;:13909)
      at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:14682$L:14719(&lt;eval&gt;:14720)
      at jdk.nashorn.internal.scripts.Script$\^eval\_$14.L:4-1$L:13161$L:13341(&lt;eval&gt;:13353)
      at jdk.nashorn.internal.scripts.Script$\^eval\_$9.L:4-1$L:7866$L:8127(&lt;eval&gt;:8153)
      at jdk.nashorn.internal.scripts.Script$\^eval\_$9.L:4-1$L:7866$L:8057(&lt;eval&gt;:8063)
      at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:14682$L:14719(&lt;eval&gt;:14720)
      at jdk.nashorn.internal.scripts.Script$\^eval\_$8.L:4-1$L:6628$L:6750(&lt;eval&gt;: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(&lt;eval&gt;:13909)
      at jdk.nashorn.internal.scripts.Script$\^eval\_$15.L:4-1$L:14682$L:14719(&lt;eval&gt;:14720)
      at jdk.nashorn.internal.scripts.Script$\^eval\_$8.L:4-1$L:6628$L:6750(&lt;eval&gt;: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(&lt;eval&gt;:13909)
      at jdk.nashorn.internal.scripts.Script$\^eval\_$16.L:4-1$L:14906$renderToString$L:14945(&lt;eval&gt;: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(&lt;eval&gt;:18335)
      at jdk.nashorn.internal.scripts.Script$\^eval\_$16.L:4-1$L:14906$renderToString(&lt;eval&gt;:14945)
      at jdk.nashorn.internal.scripts.Script$\^eval\_.runScript(&lt;eval&gt;: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
  </code></pre>
  
  <p>If I remove this line:</p>
  
  <pre><code>&lt;button onClick={this.handleAddNew}&gt; Add Friend &lt;/button&gt;
  </code></pre>
  
  <p>from the AddFriend render function, then the error goes away.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>If I try and print the result of the button element above, by doing the following:</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>I get the following print out: <a href="http://pastebin.com/raw.php?i=hEMkN8UP" rel="noreferrer">http://pastebin.com/raw.php?i=hEMkN8UP</a></p>