Crash inside React Frontload

Viewed 104

I am having a problem while trying to add server-side-rendering to my CRA app made with ConnectedRouter. I found an example of an app made with a similar architecture at https://github.com/mnsht/cra-ssr

My code is very similar, albeit slightly different in a couple of places. The example - cra-ssr loader.js makes store from the current URL as: const { store } = createStore(req.url);. I have const { store } = createStore(); right now. Don't believe that it should be causing problems.

My createStore() is essentially the same, see below:

export default function configureStore(initialState = {}) {
  let composeEnhancers = compose;
  const reduxSagaMonitorOptions = {};

  // If Redux Dev Tools and Saga Dev Tools Extensions are installed, enable them
  /* istanbul ignore next */
  if (
    process.env.REACT_APP_STAGE !== 'production' &&
    !isServer &&
    typeof window === 'object'
  ) {
    /* eslint-disable no-underscore-dangle */
    if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__)
      composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({});

    // NOTE: Uncomment the code below to restore support for Redux Saga
    // Dev Tools once it supports redux-saga version 1.x.x
    // if (window.__SAGA_MONITOR_EXTENSION__)
    //   reduxSagaMonitorOptions = {
    //     sagaMonitor: window.__SAGA_MONITOR_EXTENSION__,
    //   };
    /* eslint-enable */
  }

  const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);

  // Create the store with two middlewares
  // 1. sagaMiddleware: Makes redux-sagas work
  // 2. routerMiddleware: Syncs the location/URL path to the state
  const middlewares = [sagaMiddleware, routerMiddleware(history)];

  const enhancers = [applyMiddleware(...middlewares)];

  const store = createStore(
    createReducer(),
    initialState,
    composeEnhancers(...enhancers)
  );

  // Extensions
  store.runSaga = sagaMiddleware.run;
  store.injectedReducers = {}; // Reducer registry
  store.injectedSagas = {}; // Saga registry

  // Make reducers hot reloadable, see http://mxs.is/googmo
  /* istanbul ignore next */
  if (module.hot) {
    module.hot.accept('./reducers', () => {
      store.replaceReducer(createReducer(store.injectedReducers));
    });
  }

  return { store, history };
}

When my server gets a request to handle, it crashes with:

(node:270) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'isClientLoggingEnabled' of undefined
    at /Users/shmukler/Projects/monger/front/node_modules/react-frontload/dist/index.js:1:7360
    at step (/Users/shmukler/Projects/monger/front/node_modules/react-frontload/dist/index.js:1:1886)
    at Object.next (/Users/shmukler/Projects/monger/front/node_modules/react-frontload/dist/index.js:1:1146)
    at /Users/shmukler/Projects/monger/front/node_modules/react-frontload/dist/index.js:1:812
    at new Promise (<anonymous>)
    at __awaiter (/Users/shmukler/Projects/monger/front/node_modules/react-frontload/dist/index.js:1:450)
    at frontloadServerRender (/Users/shmukler/Projects/monger/front/node_modules/react-frontload/dist/index.js:1:7190)
    at /Users/shmukler/Projects/monger/front/server/loader.js:85:7
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
(node:270) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:270) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

It points to the line 85, which is:

  frontloadServerRender(() =>
    renderToString(
      <Loadable.Capture report={m => modules.push(m)}>
        <Provider store={store}>
          <StaticRouter location={req.url} context={context}>
            <Frontload isServer={true}>
              <App />
            </Frontload>
          </StaticRouter>
        </Provider>
      </Loadable.Capture>
    )
  )

What did I do wrong?

1 Answers

Solved the problem by downgrading from 2.x.x version of react-frontload to 1.0.3. Now, it is working fine.

Related