7

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 ?

Ibrahim
  • 584
  • 6
  • 15
  • Hi ! You use `React.renderToString` ( or `React.renderToStaticMarkup`) server side ? – Jean Jun 24 '15 at 15:18

2 Answers2

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.

Mark
  • 3,113
  • 1
  • 18
  • 24
  • 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. – TigerC10 Aug 16 '16 at 18:02
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',
George Jor
  • 61
  • 5