如何解决永久违反:可加载: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 举报,一经查实,本站将立刻删除。