facebook / react

The library for web and native user interfaces.
https://react.dev
MIT License
229.13k stars 46.88k forks source link

Nashorn Server Side Rendering - null is not a function in <eval> at line number 6621 #2427

Closed ygrenzinger closed 9 years ago

ygrenzinger commented 10 years ago

Hello to the React team !

I'm poking around ReactJS with server side rendering on Nashorn and I keep getting a very annoying problem.

The whole code is here: https://github.com/ygrenzinger/http-fluent-react And the single JSX file is https://github.com/ygrenzinger/http-fluent-react/blob/master/src/main/resources/app/react/reactComponents.jsx

The faulting code is the options in the select:

    <div>
        <div>
            <span>Sort by</span>
            <select name="orderBy" onChange={this.handleOrderByChange}>
                /* remove option to remove this error: TypeError: null is not a function in at line number 6621 */
                <option key="orderby-price" value="price">price</option>
                <option key="orderby-variation" value="variation">variation</option>
                <option key="orderby-symbol" value="symbol">symbol</option>
                <option key="orderby-company" value="company">company</option>
            </select>
        </div>

        <div className="stocks">
        {
          rows
        }
        </div>
      </div>

The very sad things it works on browser but not on Java 8 - Nashorn - JS engine :'( But I am hoping you could have some tips so I could maybe solve it ... or see the Nashorn team if it's a bug in the JS engine

I am using React 0.11.2 but 0.12 doesn't help.

PS: I have a branch with a more precise context with a similar problem and again option is the problem

var BugSelect = React.createClass({
  displayName: 'BugSelect',
  render: function() {

    var options = ['price', 'variation', 'symbol', 'company'].map(function(opt, i) {
        return <option key={i} value={opt} label={opt}>{opt}</option>;
    });

    return (
      <div>
<select value="B">
    <option value="A">Apple</option>
    <option value="B">Banana</option>
    <option value="C">Cranberry</option>
  </select>
      </div>
    );
  }
});

https://github.com/ygrenzinger/http-fluent-react/blob/bug-option-element/src/main/resources/app/react/reactComponents.jsx

zpao commented 10 years ago

There isn't quite enough info to help you here. Can you attach a stacktrace? It's possible we're hitting code that is using implied globals (eg, window), though I thought those were all safe-guarded.

ygrenzinger commented 10 years ago

I have a JVM Nashorn stacktrace ... don't think it can help :(

javax.script.ScriptException: TypeError: null is not a function in <eval> at line number 6621
    at jdk.nashorn.api.scripting.NashornScriptEngine.throwAsScriptException(NashornScriptEngine.java:586)
    at jdk.nashorn.api.scripting.NashornScriptEngine.invokeImpl(NashornScriptEngine.java:511)
    at jdk.nashorn.api.scripting.NashornScriptEngine.invokeFunction(NashornScriptEngine.java:227)
    at ygrenzinger.ReactServer.renderJS(ReactServer.java:79)
    at ygrenzinger.ReactServer.lambda$null$72ee30a1$1(ReactServer.java:91)
    [...]
Caused by: <eval>:6621 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)
        [...]

In the react.js file, the problem happens at line 6621: renderedComponent = this.render();

zpao commented 10 years ago

A Java stack isn't interesting or helpful here. Can you get a JS one?

ygrenzinger commented 10 years ago

Tweaking with a catch error, the react.js 0.12 file to have a JS stack trace, I get this (the lines are normally respected):

    at <anonymous> (src/main/resources/app/react.js:6569)
    at <anonymous> (src/main/resources/app/react.js:12368)
    at <anonymous> (src/main/resources/app/react.js:6111)
    at <anonymous> (src/main/resources/app/react.js:12368)
    at <anonymous> (src/main/resources/app/react.js:11827)
    at <anonymous> (src/main/resources/app/react.js:7349)
    at <anonymous> (src/main/resources/app/react.js:7271)
    at <anonymous> (src/main/resources/app/react.js:12368)
    at <anonymous> (src/main/resources/app/react.js:11827)
    at <anonymous> (src/main/resources/app/react.js:7349)
    at <anonymous> (src/main/resources/app/react.js:7271)
    at <anonymous> (src/main/resources/app/react.js:12368)
    at <anonymous> (src/main/resources/app/react.js:6117)
    at <anonymous> (src/main/resources/app/react.js:12368)
    at <anonymous> (src/main/resources/app/react.js:13272)
    at <anonymous> (src/main/resources/app/react.js:15411)
    at <anonymous> (src/main/resources/app/react.js:13270)
    at <anonymous> (src/main/resources/app/react.js:16091)
    at <anonymous> (src/main/resources/app/react/compiled/reactComponents.js:94)
ygrenzinger commented 10 years ago

Any lead that can help me ?

zertosh commented 9 years ago

@zpao @ygrenzinger: I was/am having the same problem with nashorn 1.8.0_25. I put up nashorn-react-fail with a minimal test case to reproduce it. I think it's a Nashorn, not a React, issue. Debugging this stuff is a pain in the ass so I don't know for sure - but I did find a "workaround".

tl;dr: Under certain conditions, when using React's context, this error happens. Adding differently named non-lifecycle methods to the Parent and the Child seems to make it work.

zpao commented 9 years ago

@zertosh thanks for the repro!

cc @jsfb I know you have more Java background than I do - could you look into this?

jimfb commented 9 years ago

@zertosh Yes, thank you, great repo.

@zpao I can confirm that it fails using npm-react 0.12.2. I hacked in my internal build of v0.13.0-alpha, and the error went away. That means it is likely either an issue with the npm build process, an issue which has been fixed in master, or a heisenbug bug in nashorn. I'll do an npm-build of 0.12 and 0.13 to see what happens, and then I think we'll be able to close this one out.

jimfb commented 9 years ago

I shimmed in an internal build from 0.12.2, and it didn't work. Since it sounds like it was broken for a while (at least since 0.11.2), and it appears to be resolved in 0.13, I'm going to close this bug out as resolved.

@zertosh It may be worth checking/building master, and using that version of react. If you run into this issue again on master/0.13, let's re-open the issue and we'll dig further.

zertosh commented 9 years ago

Thanks @jsfb, that did it! Even 0.13.0-alpha.1 is working just fine and seems stable enough, so I'm going to keep using it in one of our Nashorn apps to see if I catch anything else.