为什么我的同构 Cycle.js 应用程序在服务器上呈现时会导致 xstream 异常?
Why does my isomorphic Cycle.js app cause an xstream exception when rendering on server?
我正在尝试编写同构演示 Cycle.js/Hapi.js app, but it fails with an exception in xstream while rendering on the server. What is going wrong here? I've based my app on Cycle.js' isomorphic app example。
追溯看起来像这样:
TypeError: Uncaught error: s[i]._add is not a function
at CombineProducer._start (/Users/arve/Projects/hapi-cycle/node_modules/xstream/core.js:190:22)
at Stream._add (/Users/arve/Projects/hapi-cycle/node_modules/xstream/core.js:976:19)
at MapOperator._start (/Users/arve/Projects/hapi-cycle/node_modules/xstream/core.js:717:18)
at Stream._add (/Users/arve/Projects/hapi-cycle/node_modules/xstream/core.js:976:19)
at LastOperator._start (/Users/arve/Projects/hapi-cycle/node_modules/xstream/core.js:596:18)
at Stream._add (/Users/arve/Projects/hapi-cycle/node_modules/xstream/core.js:976:19)
at Stream.addListener (/Users/arve/Projects/hapi-cycle/node_modules/xstream/core.js:1050:14)
at Object.streamSubscribe (/Users/arve/Projects/hapi-cycle/node_modules/@cycle/xstream-adapter/lib/index.js:39:16)
at /Users/arve/Projects/hapi-cycle/node_modules/@cycle/base/lib/index.js:49:30
at Array.map (native)
渲染代码基本如下所示:
import Cycle from '@cycle/xstream-run'
import xs from 'xstream'
import {html, section, h1, p, head, title, body, div, script, makeHTMLDriver,} from '@cycle/dom'
import serialize from 'serialize-javascript'
import Logger from '@arve.knudsen/js-logger'
let logger = Logger.get('server.rendering')
let wrapVTreeWithHtmlBoilerplate = ([vtree, context,]) => {
return (
html([
head([
title('Cycle Isomorphism Example'),
]),
body([
div('.app-container', [vtree,]),
script(`window.appContext = ${serialize(context)};`),
// script(clientBundle),
]),
])
);
}
let main = (sources) => {
let vtree = (
section('.home', [
h1('The homepage'),
p('Welcome to our spectacular web page with nothing special here.'),
])
)
return {
DOM: vtree,
}
}
let renderIndex = (request, reply) => {
let context = xs.of({})
Cycle.run((sources) => {
let vtree = main(sources).DOM
let wrappedVTree = xs.combine(vtree, context)
.map(wrapVTreeWithHtmlBoilerplate)
.last()
return {
DOM: wrappedVTree,
};
}, {
DOM: makeHTMLDriver((html) => {
let wrappedHtml = `<!doctype html>${html}`
}),
context: () => {return context},
PreventDefault: () => {},
})
}
您可以找到完整的源代码 here。
我 运行 在 OS X 上使用 Node v6.6.0、babel-node 6.14.0、Hapi 15.0.3、@cycle/dom 12.2.5 和@cycle/xstream-run 3.1.0。如果您需要更多信息,请告诉我。
错误的原因是渲染的 VTree 不是流。我将代码更改为以下内容并且有效:
let vtree = sources.context.map(({}) => {
return (
section('.home', [
h1('The homepage'),
p('Welcome to our spectacular web page with nothing special here.'),
])
)
})
return {
DOM: vtree,
}
sources.context.map
调用(我从原来的同构示例中借用)确保 vtree
是一个流。
我正在尝试编写同构演示 Cycle.js/Hapi.js app, but it fails with an exception in xstream while rendering on the server. What is going wrong here? I've based my app on Cycle.js' isomorphic app example。
追溯看起来像这样:
TypeError: Uncaught error: s[i]._add is not a function
at CombineProducer._start (/Users/arve/Projects/hapi-cycle/node_modules/xstream/core.js:190:22)
at Stream._add (/Users/arve/Projects/hapi-cycle/node_modules/xstream/core.js:976:19)
at MapOperator._start (/Users/arve/Projects/hapi-cycle/node_modules/xstream/core.js:717:18)
at Stream._add (/Users/arve/Projects/hapi-cycle/node_modules/xstream/core.js:976:19)
at LastOperator._start (/Users/arve/Projects/hapi-cycle/node_modules/xstream/core.js:596:18)
at Stream._add (/Users/arve/Projects/hapi-cycle/node_modules/xstream/core.js:976:19)
at Stream.addListener (/Users/arve/Projects/hapi-cycle/node_modules/xstream/core.js:1050:14)
at Object.streamSubscribe (/Users/arve/Projects/hapi-cycle/node_modules/@cycle/xstream-adapter/lib/index.js:39:16)
at /Users/arve/Projects/hapi-cycle/node_modules/@cycle/base/lib/index.js:49:30
at Array.map (native)
渲染代码基本如下所示:
import Cycle from '@cycle/xstream-run'
import xs from 'xstream'
import {html, section, h1, p, head, title, body, div, script, makeHTMLDriver,} from '@cycle/dom'
import serialize from 'serialize-javascript'
import Logger from '@arve.knudsen/js-logger'
let logger = Logger.get('server.rendering')
let wrapVTreeWithHtmlBoilerplate = ([vtree, context,]) => {
return (
html([
head([
title('Cycle Isomorphism Example'),
]),
body([
div('.app-container', [vtree,]),
script(`window.appContext = ${serialize(context)};`),
// script(clientBundle),
]),
])
);
}
let main = (sources) => {
let vtree = (
section('.home', [
h1('The homepage'),
p('Welcome to our spectacular web page with nothing special here.'),
])
)
return {
DOM: vtree,
}
}
let renderIndex = (request, reply) => {
let context = xs.of({})
Cycle.run((sources) => {
let vtree = main(sources).DOM
let wrappedVTree = xs.combine(vtree, context)
.map(wrapVTreeWithHtmlBoilerplate)
.last()
return {
DOM: wrappedVTree,
};
}, {
DOM: makeHTMLDriver((html) => {
let wrappedHtml = `<!doctype html>${html}`
}),
context: () => {return context},
PreventDefault: () => {},
})
}
您可以找到完整的源代码 here。
我 运行 在 OS X 上使用 Node v6.6.0、babel-node 6.14.0、Hapi 15.0.3、@cycle/dom 12.2.5 和@cycle/xstream-run 3.1.0。如果您需要更多信息,请告诉我。
错误的原因是渲染的 VTree 不是流。我将代码更改为以下内容并且有效:
let vtree = sources.context.map(({}) => {
return (
section('.home', [
h1('The homepage'),
p('Welcome to our spectacular web page with nothing special here.'),
])
)
})
return {
DOM: vtree,
}
sources.context.map
调用(我从原来的同构示例中借用)确保 vtree
是一个流。