1. 技术文章
  2. Error rendering React.js using JVM Nashorn (Play Framework). I get “null is not a function”

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

由 ▼魔方 西西 提交于 2019-12-12 08:48:29

问题


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


回答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.



来源：https://stackoverflow.com/questions/29429955/error-rendering-react-js-using-jvm-nashorn-play-framework-i-get-null-is-not

标签
java
playframework
java-8
reactjs
nashorn
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!