代码之家 › 专栏 › 技术社区 › aknuds1

为什么我的同构循环。js-app在服务器上渲染时会导致xstream异常吗?

xstream-js hapi.js cyclejs isomorphic-javascript javascript

0

aknuds1 · 技术社区 · 10 年前

我想写一个同构的演示 Cycle.js / Hapi.js 应用程序,但在服务器上呈现时,它失败,并在xstream中出现异常。这里出了什么问题?我的应用程序基于 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 .

我使用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上运行。如果需要更多信息,请告诉我。

1 回复 | 直到 10 年前

1

aknuds1 10 年前

错误的原因是呈现的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 call(我借用了原始同构示例)确保 vtree 是一条流。