React Frontload 内部崩溃

Question

我在尝试向使用 ConnectedRouter 制作的 CRA 应用添加服务器端渲染时遇到问题。我在 https://github.com/mnsht/cra-ssr

找到了一个使用类似架构制作的应用示例

我的代码非常相似，尽管在一些地方略有不同。示例 - cra-ssr loader.js 将当前 URL 存储为：const { store } = createStore(req.url);。我现在有 const { store } = createStore();。不要相信它应该引起问题。

我的createStore()基本一样，见下：

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 };
}

当我的服务器收到要处理的请求时，它崩溃了：

(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.

指向第85行，即：

  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>
    )
  )

我做错了什么？

Answer 1

通过将 react-frontload 的 2.x.x 版本降级到 1.0.3 解决了这个问题。现在，它工作正常。

React Frontload 内部崩溃

Crash inside React Frontload

node.js

reactjs

react-router

server-side-rendering

react-redux