reactjs - 不变违规：可加载：SSR 需要 `@loadable/babel-plugin`，请安装它可加载组件

Question

我loadable component在 ReactJS 项目中使用。对于 SSR，但在运行 start 命令时出现以下错误，我在 GitHub 中看到与我的问题相关的问题，但主要解决方案对我不起作用。

这是我的路由文件，我在以下文件中添加了所有路由并加载它baseLoadable：

import React from 'react';
// import Spinner from '../Components/Spinner';
import RequireAuth from '../Hoc/auth';
import baseLoadable from '@loadable/component';

function loadable(func: any) {
  return baseLoadable(func, { fallback: <div>...loading</div> });
}

const AuthPage = loadable(() => import('../Pages/auth/index'));

const Register = loadable(() => import('../Components/Register/index'));
const MainAuth = loadable(() => import('../Pages/auth/main/index'));
const Order = loadable(() => import('../Pages/order'));
const Menu = loadable(() => import('../Components/Menu/index'));
const InnerRoute = loadable(() => import('../Pages/order/InnerRoute'));
const TabBar = loadable(() => import('../Pages/order/tabBar/index'));
const InfoRest = loadable(() => import('../Components/infoRes/index'));
const Favorite = loadable(() => import('../Components/Favorite/index'));

const Routes: any | undefined = [
  {
    component: Order,
    path: '/',
    exact: true,
    routes: [
      {
        component: TabBar,
        path: '/',
      },
      {
        component: Menu,
        path: '/',
        exact: true,
      },
      {
        component: InnerRoute,
        path: '/:name',
        routes: [
          {
            path: '/',
            component: Menu,
            exact: true,
          },
          {
            path: '/info',
            component: InfoRest,
          },
          {
            path: '/favorite',
            component: Favorite,
          },
        ],
      },
    ],
  },
  {
    component: AuthPage,
    path: '/auth',
    routes: [
      {
        component: MainAuth,
        path: '/auth',
        exact: true,
      },
      {
        component: Register,
        path: '/auth/test',
        exact: true,
      },
    ],
  },
];

这是我要渲染为字符串的渲染文件，然后调用 HTML 来创建 HTML，但在 catch 部分出现错误

export default (store: any, req: any, res: any) => {
  const extractor = new ChunkExtractor({ statsFile });
  const sheet = new ServerStyleSheet();
  const context = {};
  let content;

  try {
    content = renderToString(
      extractor.collectChunks(
        <Provider store={store}>
          <StyleSheetManager sheet={sheet.instance}>
            <StaticRouter location={req.path} context={context}>
              <div>{renderRoutes(Routes)}</div>
            </StaticRouter>
          </StyleSheetManager>
        </Provider>
      )
    );
    const styleTags = sheet.getStyleTags();
    console.log('in the render', store);

    const fullApp = Html({
      helmet: Helmet.renderStatic(),
      store: store.getState(),
      extractor,
      styleTags,
      content,
    });
    res.status(200).send(fullApp);
  } catch (err) {
    console.log('err in the render to strign', err);
  } finally {
    sheet.seal();
  }
};