TheoG TheoG - 3 months ago 39
React JSX Question

ReferenceError: window is not defined (devToolsExtension)

So, I'm attempting to make 'React Developer Tools' chrome extension aware of my app, but am receiving the above mentioned error. Can anyone advice as to the best way to address this issue?



import configureMiddleware from './configureMiddleware';
import configureReducer from './configureReducer';
import configureStorage from './configureStorage';
import { applyMiddleware, createStore, compose } from 'redux';
import { persistStore, autoRehydrate } from 'redux-persist';

type Options = {
initialState: Object,
platformDeps?: Object,
platformMiddleware?: Array<Function>,
};

const configureStore = (options: Options) => {
const {
initialState,
platformDeps = {},
platformMiddleware = [],
} = options;

const reducer = configureReducer(initialState);

const middleware = configureMiddleware(
initialState,
platformDeps,
platformMiddleware,
);

const enhancers = compose(
window.devToolsExtension ? window.devToolsExtension() : f => f
);

const store = createStore(
reducer,
initialState,
compose(
applyMiddleware(...middleware),
autoRehydrate(),
),
enhancers,
);




Answer

Are you doing server-side rendering by any chance?

One quick fix I can think of to silence the error when window is not available is to add another check like this:

const enhancers = compose(
 (typeof window !== 'undefined' && window.devToolsExtension) ? window.devToolsExtension() : f => f
);