Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Managing 'window' object in Isomorphic App with ReactJS and Flask Python

I am developing an application with Flask Backend with ReactJS front. ReactJS app has been developed and bundled with webpack.

Everything works fine with client side rendering which is bundled with webpack.

I am now trying to add server side rendering with python-react .

But problem is, I have to share some variables to my ReactJS app via Jinja2 template in base template index.html which has the reactjs root component node <div id='react-node'></div>.

I had to send my routes and config to my application via jinja2 template like below ,

//index.html

<!doctype html>
<html>
...
...

<script type='text/javascript'>
  var STATIC_IMAGE_ROOT = "{{ url_for('static', filename='img/') }}";
  var ROUTES = { ... };
...
</script>

</html>

All the above js variables are being set to global window object .

But when I am trying to render the component in python, it throws exception for window object ReactRenderingError: react: ReferenceError: window is not defined .

What is the best way to solve this issue ?

like image 990
Ibrahim Avatar asked Jun 24 '15 14:06

Ibrahim


1 Answers

There is no window global when rendering on the server. You can create a fake window, first checking if the window exists:

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

Alternatively, you can use jsdom, or a similar library to create a fake DOM.

like image 126
Mark Avatar answered Sep 18 '22 08:09

Mark