Инвариантное нарушение: загружаемый: SSR требует `@ loadable / babel-plugin`, установите его загружаемый компонент

Question

Я использую loadable componentв проекте ReactJS. Для SSR, но я получаю следующую ошибку, когда запускаю команду запуска, я видел проблему в 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();
  }
};