为什么我的同构Cycle.js应用程序在服务器上呈现时会导致xstream异常？

问题描述：

我正在尝试编写演示同构Cycle.js/Hapi.js应用程序，但它在服务器上呈现时在xstream中发生异常并失败。这里出了什么问题？我的应用基于Cycle.js' isomorphic app example。为什么我的同构Cycle.js应用程序在服务器上呈现时会导致xstream异常？

回溯看起来是这样的：

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。

我使用Node v6.6.0，babel-node 6.14.0，Hapi 15.0.3，@ cycle/dom 12.2.5和@cycle/xstream-run 3.1.0在OS X上运行。让我知道你是否需要更多信息。

请分别在本地开发环境和服务器环境中发布有关JS运行时间的信息。 –

@przemo_li现在都是本地的，但我会发布它。 – aknuds1

@przemo_li完成。 – aknuds1

答

错误的原因是呈现的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应用程序在服务器上呈现时会导致xstream异常？

相关推荐