永久违反：可加载：SSR需要`@ loadable / babel-plugin`，请安装它可加载组件

问题描述

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

这是我的路线文件，我在以下文件中添加了所有路线，并使用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,},{
        component: Menu,{
        component: InnerRoute,path: '/:name',routes: [
          {
            path: '/',component: Menu,{
            path: '/info',component: InfoRest,{
            path: '/favorite',component: Favorite,],{
    component: AuthPage,path: '/auth',routes: [
      {
        component: MainAuth,{
        component: Register,path: '/auth/test',];

这是我的渲染文件，将其渲染为字符串，然后调用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();
  }
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）