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

Question

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

9.4k views Asked by Ibrahim At 24 June 2015 at 14:36

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 ?

Original Q&A

There are 2 answers

**Mark** · Answer 1 · 2015-06-24T19:45:32+00:00

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.

**George Jor** · Answer 2 · 2016-03-01T14:39:41+00:00

George Jor On 01 March 2016 at 14:39

Just add the following to webpack config:

  // By default, Webpack is set up to target the browser,
  // not a Node environment. Try setting target in your config:
  target: 'node',

TechQA.

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

There are 2 answers

Related Questions in FLASK

Related Questions in REACTJS

Related Questions in WEBPACK

Related Questions in SERVERSIDE-JAVASCRIPT

Related Questions in ISOMORPHIC-JAVASCRIPT

Popular Questions

Popular Tags

Trending Questions