easy-team / egg-view-react-ssr Goto Github PK
View Code? Open in Web Editor NEWEgg React Server Side Render (SSR) Plugin
Home Page: https://easyjs.cn
License: MIT License
Egg React Server Side Render (SSR) Plugin
Home Page: https://easyjs.cn
License: MIT License
在git的分支中有看到,2.3.2版本是支持stateless component的渲染的,为什么后来的版本里没有支持,而且也没有相应的警告信息?
请问,若不使用easywebpack,而只使用egg-view-react-ssr该怎样配置呢?
我在egg的项目里引入了egg-view-react-ssr,并开启插件后,然后自己配置webpack环境,却总是提示can't inject of undefined,若不使用easywebpack,配置webpack的思路大概是怎样的呢
现象:使用spa ssr渲染模式时,页面入口可以获取到服务端的ctx和初始数据,但在layout里面无法获取ctx和初始数据,正常多页面启用loader或者客户端渲染时是可以在layout获取到ctx的,没看出明白问题在哪?
预期:spa ssr渲染模式时layout也需要获取ctx和初始数据
version:[email protected]
demo code
spa ssr demo entry
const serverRender = (context, options)=> {
const { ctx, request, helper, url} = context.state;
console.log("==================context")
// console.log(context) // 可以拿到ctx
const branch = matchRoutes(routes, url);
const promises = branch.map(({route}) => {
const fetch = route.component.fetch;
return fetch instanceof Function ? fetch(ctx) : Promise.resolve(null)
});
return Promise.all(promises).then(data => {
const initState = context.state;
data.forEach(item => {
Object.assign(initState, item);
});
context.state = Object.assign({}, context.state, initState);
const store = create(initState);
return () =>(
<Layout>
<Provider store={store}>
<StaticRouter basename="/ssrdemo" location={url} context={{}}>
<App url={url}/>
</StaticRouter>
</Provider>
</Layout>
)
});
};
layout.js
export default class Layout extends React.Component {
render() {
let { ctx, request, helper, ...initState } = this.props;
console.log('===================layout')
console.log(this.props) // 无法拿到ctx
// const serialize = require('serialize-javascript');
// initState = initState.state || initState;
return (
<html>
<head>
<title>{this.props.title}</title>
<meta charSet="utf-8"></meta>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"></meta>
<meta httpEquiv="X-UA-Compatible" content="IE=edge"></meta>
<meta name="keywords" content={this.props.keywords}></meta>
<meta name="description" content={this.props.description}></meta>
{ EASY_ENV_IS_PROD && (
<script dangerouslySetInnerHTML={{__html: baiduTongji}}></script>
) }
{ ctx && ctx.query.debug==='vconsole' && (
<React.Fragment>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vConsole/3.2.0/vconsole.min.js"></script>
<script dangerouslySetInnerHTML={{__html:`new VConsole();`}}></script>
</React.Fragment>
) }
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.min.js"></script>
<script dangerouslySetInnerHTML={{__html:`document.write('${ie9Mixins}')`}}></script>
{ ctx && !/\/lowVersionBrowser/.test(ctx.request.url) && <script dangerouslySetInnerHTML={{__html:`document.write('${ie8Mixins}')`}}></script> }
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"></link>
</head>
<body>
<div id="app">{this.props.children}</div>
{/* <script id="__INITIAL_STATE__" dangerouslySetInnerHTML={{__html: `window.__INITIAL_STATE__= ${serialize(initState, { isJSON: true })};`}}></script> */}
</body>
</html>
)
}
}
按文档添加
// webapck.config.js module: { rules: [ { less: true } ] },
// package.json "less": "^2.7.2", "less-loader": "^4.0.5",
配置后执行npm run dev报错
`
easyteam/node_modules/@easy-team/easywebpack-react/lib/base.js:23
if (Array.isArray(itemLoader.use)) {
^
TypeError: Cannot read property 'use' of undefined
at /Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/@easy-team/easywebpack-react/lib/base.js:23:36
at Array.forEach ()
at WebpackClientBuilder.prepareCssModuleLoader (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/@easy-team/easywebpack-react/lib/base.js:21:26)
at WebpackClientBuilder.createWebpackLoader (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/@easy-team/easywebpack/lib/core/loader.js:394:10)
at WebpackClientBuilder.combineWebpackConfig (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/@easy-team/easywebpack/lib/target/base.js:141:21)
at WebpackClientBuilder.create (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/@easy-team/easywebpack/lib/target/base.js:164:17)
at /Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/@easy-team/easywebpack/lib/builder.js:152:61
at Array.forEach ()
at Object.exports.getWebpackConfig (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/@easy-team/easywebpack/lib/builder.js:147:12)
at Object.exports.getWebpackConfig (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/@easy-team/easywebpack-react/index.js:8:37)
at module.exports (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/config/config.local.js:22:36)
at AgentWorkerLoader.loadFile (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/egg-core/lib/loader/egg_loader.js:304:13)
at AgentWorkerLoader._loadConfig (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/egg-core/lib/loader/mixin/config.js:83:25)
at AgentWorkerLoader._preloadAppConfig (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/egg-core/lib/loader/mixin/config.js:68:27)
at AgentWorkerLoader.loadConfig (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/egg-core/lib/loader/mixin/config.js:26:28)
at AgentWorkerLoader.loadConfig (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/egg/lib/loader/agent_worker_loader.js:16:11)
2020-10-26 19:25:01,294 ERROR 14479 nodejs.AgentWorkerDiedError: [master] agent_worker#1:14480 died (code: 1, signal: null)
at Master.onAgentExit (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/egg-cluster/lib/master.js:425:17)
at Master.emit (events.js:315:20)
at Messenger.sendToMaster (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/egg-cluster/lib/utils/messenger.js:137:17)
at Messenger.send (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/egg-cluster/lib/utils/messenger.js:102:12)
at ChildProcess. (/Users/zhangyuliang/Desktop/workspace/ssr/easyteam/node_modules/egg-cluster/lib/master.js:289:22)
at Object.onceWrapper (events.js:422:26)
at ChildProcess.emit (events.js:315:20)
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
name: "AgentWorkerDiedError"
pid: 14479
`
是因为配置上有冲突还是其它别的原因?
react hooks 实例代码
function Index(props) {}
// 此处如何改造?
Index.asyncData = () => {}
看到被包裹成Page的reactClass
app.react.renderElement(reactClass, locals)
一直在使用easywebpack,项目有场景在运行时对样式的操作/变量的传值,需要使用styled-component,但在server端进行renderToString收集好component的样式表,append进
import { renderToString } from 'react-dom/server'
import { ServerStyleSheet } from 'styled-components'
const sheet = new ServerStyleSheet()
try {
const html = renderToString(sheet.collectStyles(<YourApp />))
const styleTags = sheet.getStyleTags() // or sheet.getStyleElement();
} catch (error) {
// handle error
console.error(error)
} finally {
sheet.seal()
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.