동종 Cycle.js 앱이 서버에서 렌더링 할 때 xstream 예외를 발생시키는 이유는 무엇입니까?

데모 isomorphic Cycle.js/Hapi.js app을 쓰려고하는데 서버에서 렌더링하는 동안 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를 찾을 수 있습니다.

노드 v6.6.0, 바벨 노드 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, 
}

(I 원래 동형 예에서 차용)를 sources.context.map 호출 vtree이 스트림 것을 보장한다.

출처

2016-09-20 12:21:52 aknuds1

동종 Cycle.js 앱이 서버에서 렌더링 할 때 xstream 예외를 발생시키는 이유는 무엇입니까?

답변

관련 문제