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

Question

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 ?

Hi ! You use React.renderToString ( or React.renderToStaticMarkup) server side ? — Jean
– Jean, Commented Jun 24, 2015 at 15:18

Mark · Accepted Answer · 2015-06-24 19:45:32Z

5

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.

answered Jun 24, 2015 at 19:45

Mark

3,1631 gold badge20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TigerC10 Over a year ago

The closer to the initialization of the app the better, in node when you define something on the global it's available to all files. If your npm start is running a script called index.js, then try to define it in index.js or one of the files that index.js requires.

George Jor · Accepted Answer · 2016-03-01 14:39:41Z

2

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',

answered Mar 1, 2016 at 14:39

George Jor

615 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related