javascript - how to properly deal with window=undefined error in react server side rendering - Stack Overflow

admin管理员组

文章数量:1431949

I'm using websockets on the browser which use the window object. But since i'm using server-side rendering with react. my server crashes and raises the below error when piling

 [Error] ReferenceError: window is not defined

particularly because one of my ponents require the client-socket for munication with the server.

Ive tried adding the below code at the start of the my server.js file

if (typeof(window) == 'undefined'){
    global.window = new Object();
}

but it still raises the error for some reason. What else can i be doing? Has anyone dealt with this issue?

UPDATE - the problem might not be only specific to socket. Basically , i'm importing couple of objects from the below file in my ponent

import React from 'react';
import ReactDOM from 'react-dom';

import {Provider} from 'react-redux';
import {createStore} from 'redux';
import { Router, Route, browserHistory ,IndexRoute} from 'react-router'
import routes from '../shared/routes/routes';
import rootReducer from '../shared/reducers/index';
import SocketCluster from 'socketcluster-client';

const initialState = window.__INITIAL_STATE__

export const store = createStore(rootReducer,initialState)

const options = {
  port: 3000
}

if(store.getState().User.isAuthenticated){
  const socket = SocketCluster.connect(options)
}

console.log(store.getState())

ReactDOM.render(
  <Provider store={store}>
    <Router history={browserHistory}>
      {routes}
    </Router>
  </Provider>
  ,document.getElementById('app')
)

in my ponent

import React from 'react';
import Skill from './skill';
import Select from 'react-select';
import {socket ,store} from '../../client/index';

i'm getting the error because for some reason. the server is also looking at window.__INITIAL_STATE__ as well. So the problem is i cannot seem to import anything from the index.js file on the client side.

What can i do?

I'm using websockets on the browser which use the window object. But since i'm using server-side rendering with react. my server crashes and raises the below error when piling

 [Error] ReferenceError: window is not defined

particularly because one of my ponents require the client-socket for munication with the server.

Ive tried adding the below code at the start of the my server.js file

if (typeof(window) == 'undefined'){
    global.window = new Object();
}

but it still raises the error for some reason. What else can i be doing? Has anyone dealt with this issue?

UPDATE - the problem might not be only specific to socket. Basically , i'm importing couple of objects from the below file in my ponent

import React from 'react';
import ReactDOM from 'react-dom';

import {Provider} from 'react-redux';
import {createStore} from 'redux';
import { Router, Route, browserHistory ,IndexRoute} from 'react-router'
import routes from '../shared/routes/routes';
import rootReducer from '../shared/reducers/index';
import SocketCluster from 'socketcluster-client';

const initialState = window.__INITIAL_STATE__

export const store = createStore(rootReducer,initialState)

const options = {
  port: 3000
}

if(store.getState().User.isAuthenticated){
  const socket = SocketCluster.connect(options)
}

console.log(store.getState())

ReactDOM.render(
  <Provider store={store}>
    <Router history={browserHistory}>
      {routes}
    </Router>
  </Provider>
  ,document.getElementById('app')
)

in my ponent

import React from 'react';
import Skill from './skill';
import Select from 'react-select';
import {socket ,store} from '../../client/index';

i'm getting the error because for some reason. the server is also looking at window.__INITIAL_STATE__ as well. So the problem is i cannot seem to import anything from the index.js file on the client side.

What can i do?

• javascript
• reactjs
• websocket
• redux

Share Improve this question Follow edited Jul 16, 2016 at 14:38 Jayaram asked Jul 16, 2016 at 14:24 JayaramJayaram 6,6061212 gold badges4747 silver badges8484 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Javascript doesn't necessarily have a pilation phase. Granted, most implementations do pile, but there isn't a single phase in which this happens. The access to the window variable does not throw until it is executed.

When using React, the normal way to run code only on the client is to put it inside ponentDidMount.

In any case I would advise to not attempt to create fake versions of client-side APIs on the server to prevent breakage. Instead, make sure your client-side code only ever runs on the client.

You could wrap it in a function and call it only from ponentDidMount or you could test the environment.

function clientInitialize() {
  // start your client side app here
  // create client-side store here
}

function serverInitialize() {
  // create server-side store here
}

if (typeof window === 'object') {
  clientInitialize();
} else {
  serverInitialize();
}

I should note that server side code should preferably never be shipped to the client for reasons of security and code size. It is better to initialize the store from code that won't be available on the client at all.

There is no one way to do these things and there are pros and cons for each method.

Dan Abramov, the creator of Redux, I believe is a big proponent of knowing the reasons for every piece of code you have, to understand the libraries you use, and to prefer a method you understand over an accepted standard method. Redux itself is heavily based on these ideas which is why it doesn't prescribe much. It's also why there is such a teeming add-on munity around Redux.

There really is no need to force all code to be patible with both the server and the client. Just separate the parts that necessarily must be separate.

本文标签： javascripthow to properly deal with windowundefined error in react server side renderingStack Overflow