爲什麼我的同構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上運行。讓我知道你是否需要更多信息。

來源

2016-09-20 aknuds1

請分別在本地開發環境和服務器環境中發佈有關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是一個流。

來源

2016-09-20 12:21:52 aknuds1

爲什麼我的同構Cycle.js應用程序在服務器上呈現時會導致xstream異常？

回答

相關問題