clearTimeout is not defined

[EugeneKovalev]

Hi @nitely I've got an issue here:

File "/home/user/PycharmProjects/Project/venv/lib/python3.6/site-packages/react/utils.py", line 37, in load_libs
    .load_libs(scripts_paths))
  File "/home/user/PycharmProjects/Project/venv/lib/python3.6/site-packages/v8cffi/context.py", line 185, in load_libs
    self.run_script(_read_file(path), identifier=path)
  File "/home/user/PycharmProjects/Project/venv/lib/python3.6/site-packages/v8cffi/context.py", line 227, in run_script
    raise exceptions.get_exception(code)(six.text_type(error))
v8cffi.exceptions.V8JSError: webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:5260
    var localClearTimeout = clearTimeout;
                            ^

ReferenceError: clearTimeout is not defined
    at eval (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:5260:25)
    at eval (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17430:5)
    at Object../node_modules/react-dom/cjs/react-dom.development.js (/home/eugene/PycharmProjects/account-selection-ui/frontend/static/js/build/bundle.js:22904:1)
    at __webpack_require__ (/home/eugene/PycharmProjects/account-selection-ui/frontend/static/js/build/bundle.js:20:30)
    at eval (webpack-internal:///./node_modules/react-dom/index.js:32:20)
    at Object../node_modules/react-dom/index.js (/home/eugene/PycharmProjects/account-selection-ui/frontend/static/js/build/bundle.js:22916:1)
    at __webpack_require__ (/home/eugene/PycharmProjects/account-selection-ui/frontend/static/js/build/bundle.js:20:30)
    at eval (webpack-internal:///./frontend/js/index.js:16:17)
    at Object../frontend/js/index.js (/home/eugene/PycharmProjects/account-selection-ui/frontend/static/js/build/bundle.js:4135:1)
    at __webpack_require__ (/home/eugene/PycharmProjects/account-selection-ui/frontend/static/js/build/bundle.js:20:30)

Do you have any thoughts? Thanks!

[nitely]

I'll take a look later. In the meantime, try a production mode build, that react-dom.development.js means the build is in development mode. You can set process.env.NODE_ENV = 'production'. Also, try setting webpack in production mode (I don't remember if it's the same thin).

Another thing to try would be to define a dummy setTimeout (similar to the dummy console) that just runs whatever it receives if delay is 0 and does nothing if delay > 0, then it returns a dummy function (clearTimeout) that does nothing.

[EugeneKovalev]

@nitely Thank you for such a quick response. Setting a production environment did not help. I still get ReferenceError: clearTimeout is not defined.

Regarding the dummy setTimeout, I believe you wanted to say clearTimeout instead of it, right? I've been able to create a dummy function at the beginning of bundle.js:

function clearTimeout(x, y){

}

And then I started to get ReferenceError: window is not defined. It seems like a bunch of native js stuff not working :(

Additional info: I created a new tiny bundle.js: console.log(123)

It worked just fine - no errors.

But when I modified bundle.js like this:

console.log(123)
window

I got:

v8cffi.exceptions.V8JSError: /opt/project/frontend/static/js/build/bundle1.js:2
     window
     ^
ReferenceError: window is not defined
     at /opt/project/frontend/static/js/build/bundle1.js:2:1

[nitely]

I believe you wanted to say clearTimeout instead of it, right?

Yeah, that. That makes sense, windows is not defined, since that's a browser thing. Maybe you are calling some react function other than render to string. I've not tried a recent react versions, maybe render to string is no longer synchronous.

It seems like a bunch of native js stuff not working :(

This issue is stated in the docs

[nitely]

This is how you would define clearTimeout: global.clearTimeout = function() {}, but maybe it must be defined before loading anything like console. However, react should not be doing anything with clearTimeout on a synchronous method like renderToString. My guess without trying is you are doing something other than calling that.

Take a look at this https://github.com/nitely/python-react-v8/blob/master/examples/simple/src/index.js example, all it does is call renderToString when window is not defined, meaning when it's not running in a browser.

[EugeneKovalev]

Unfortunately, I've got a lot of spots where window is used including standard webpack libraries. I guess I should use another approach here using Jinja2 or something like that :(

Thank you for cooperation!

[nitely]

Most window functions make no sense when rendering a static HTML (that what's you are realy doing when calling react.renderToString). There is no browser/window. Things like timeouts are of no use... You would want to render the view ASAP, not relaying on something that gets render after some timeout or after rendering the HTML, since at that point all you have is a string. I think mostof those functions should just be no-ops (ie. dummy functions that do nothing) but then you be hiding some weird bugs by doing that. Webpack is usually ran as a pre step to compile the JS, that should not be an issue, I use it. you can use node and webpack to compile the code, then use the bundle with this library. If you can control the code that call window functions, you can always do stuff like window && window. setTimeout(...) that way you check window is defined first.

You could also try this

if (typeof window === 'undefined') {
    global.window = {}
}

It should ignore all window function calls...

FWIW, this is not a limitation of this library, but a known "issue", see:

• https://stackoverflow.com/questions/31029548/managing-window-object-in-isomorphic-app-with-reactjs-and-flask-python
• https://github.com/reactjs/react-chartjs/issues/57
• https://medium.com/@muthuks/universal-rendering-with-react-60a7ca86820
• etc

The first link advises to define global.window