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 ?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With