Window is not defined with Server Side Rendering React and Express

Question

Note that I am using Turbo360, you can find more about here at https://www.turbo360.co/, but I assure you it is exactly like express in how it works, so the error is not coming from here.

I have talked to some people and from what I have gathered this error is coming from my entry point where I call cont initialState = window.INITIAL_STATE;.

This error is triggered when I hit my back-end routes on the server side. However the route itself does succeed on the back-end, and what I mean by that is that if I were to log the data I get a user back success.

However on the front-end I get this instead:

I will try not to clutter this up to much so you will have to have some good knowledge about SSR. The SSR part works just fine until I hit my back-end express routes. So I will keep the code to those unless it is necessary to add it in.

React entry point:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { renderRoutes } from 'react-router-config';

import store from './stores';
import routes from './routes';

const initialState = window.INITIAL_STATE; //WHERE I BELIEVE ERROR IS COMMING FROM

ReactDOM.hydrate(
  <Provider store={store.configure(initialState)}>
    <BrowserRouter>
      <div>{renderRoutes(routes)}</div>
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

Server entry point:

require('babel-core/register')({
  presets: ['env', 'react', 'stage-0', 'stage-1']
});

const pkg_json = require('./package.json');
const vertex = require('vertex360')({ site_id: pkg_json.app });
var renderer = require('./renderer.js');

// initialize app
const app = vertex.app();

// import routes
const index = require('./routes/index');
const api = require('./routes/api');
const users = require('./routes/users');

// set routes
app.use('/api/users', users);

// hopefully will be used on every Route, this should handle SSR RR4
app.use(renderer);

module.exports = app;

Server Side users Route for register:

router.post('/register', (req, res) => {
  const body = req.body;

  if (body.username.length == 0) {
    res.json({
      confirmation: 'fail',
      message: 'Please enter an username address.'
    });

    return;
  }

  if (body.password.length == 0) {
    res.json({
      confirmation: 'fail',
      message: 'Please enter a password.'
    });

    return;
  }

  turbo
    .createUser(body)
    .then(data => {
      res.json({
        confirmation: 'success',
        user: data
      });
    })
    .catch(err => {
      res.json({
        confirmation: 'fail',
        message: err.message
      });
    });
});

Action:

axios.post('/api/users/register', params)
  .then(response => { console.log(response.data });
  .catch(err => { console.log(err); });

Try this : https://stackoverflow.com/a/46908295/2557517 – Kira Feb 13 '19 at 15:44 — Kira, Feb 13 '19 at 15:44

score 2 · Accepted Answer · answered Nov 13 '17 at 16:09

2

Looking at the code the first fix that should be done is

cont initialState = typeof window !== "undefined" && window && window.INITIAL_STATE;.

This should ideally solve the window not defined issues for you. Since while doing SSR, window object will not exist since that is a browser level object.

answered Nov 13 '17 at 16:09

VivekN

1,562
11
14

Still getting `window is not defined` – Taylor Austin Nov 13 '17 at 16:13
Please let me know if you need more code to help out. – Taylor Austin Nov 13 '17 at 16:27
@TaylorAustin can we connect on Team Viewer, so that I can debug this better? – VivekN Nov 13 '17 at 16:56
Ive never used Team Viewer but yes I would like that, I can also link you the repo if that would help as well – Taylor Austin Nov 13 '17 at 17:04
here is the repo if this would help more https://github.com/tbaustin/ghost-hunters.git – Taylor Austin Nov 13 '17 at 17:11
@TaylorAustin try installing team viewer and let's debug this together. – VivekN Nov 13 '17 at 18:25
After I have it downloaded how can I add you as a contact? – Taylor Austin Nov 13 '17 at 18:36
@TaylorAustin you will have to share your teamviewer id and password with me to connect – VivekN Nov 13 '17 at 19:18
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158893/discussion-between-vivekn-and-taylor-austin). – VivekN Nov 13 '17 at 19:24
1

@VivekN what was the solution? – ArtBIT May 28 '18 at 11:58
@VivekN what was the solution? – 1252748 Jul 10 '18 at 15:49
the solution was checking if typeof window !== "undefined" – VivekN Jul 10 '18 at 16:26
hey guys ...I am getting this error on an external library mojs . So,I tried adding the workaround there but no help still – Aniketh Saha Dec 12 '18 at 19:05

score 0 · Answer 2 · answered Oct 19 '21 at 19:02

0

You can use process.browser to exclude error in your app.

See bottom example:

function Example() {
  const initialState =
    process.browser && window.INITIAL_STATE;

  return <div> { initialState } </div>
}

answered Oct 19 '21 at 19:02

mohammad barzegar

337
6
11

Window is not defined with Server Side Rendering React and Express

2 Answers2