Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

renderToStream causes error in some cases. #3846

Closed
07akioni opened this issue May 29, 2021 · 7 comments
Closed

renderToStream causes error in some cases. #3846

07akioni opened this issue May 29, 2021 · 7 comments

Comments

@07akioni
Copy link
Contributor

07akioni commented May 29, 2021

Version

3.0.11

Reproduction link

https://replit.com/@07akioni/vuessr

image

Steps to reproduce

Follow the link.

const { createApp, resolveComponent, h } = require("vue");
const { renderToStream: _renderToStream } = require("@vue/server-renderer");

const app = createApp({
  render() {
    const Foo = resolveComponent("foo");
    return h(Foo);
  },
});
app.component("foo", {
  render: () => h("div", "foo"),
});

const promisifyStream = (stream) => {
  return new Promise((resolve, reject) => {
    let result = "";
    console.log("ondata");
    stream.on("data", (data) => {
      result += data;
    });
    stream.on("error", () => {
      reject(result);
    });
    stream.on("end", () => {
      resolve(result);
    });
  });
};

const renderToStream = (app) => promisifyStream(_renderToStream(app));

renderToStream(app).then((v) => {
  console.log(v);
});

What is expected?

No error.

What is actually happening?

internal/streams/readable.js:642
  throw new ERR_METHOD_NOT_IMPLEMENTED('_read()');
  ^

Error [ERR_METHOD_NOT_IMPLEMENTED]: The _read() method is not implemented
    at Readable._read (internal/streams/readable.js:642:9)
    at Readable.read (internal/streams/readable.js:481:10)
    at resume_ (internal/streams/readable.js:968:12)
    at processTicksAndRejections (internal/process/task_queues.js:80:21) {
  code: 'ERR_METHOD_NOT_IMPLEMENTED'
}

It's wired that in stackbliz web container and vue's jest test there is no error.

https://stackblitz.com/edit/node-daswhe?file=index.js

image

@07akioni
Copy link
Contributor Author

I found that the reason why the tests passed is jest mutates Promise. Emmm...

jestjs/jest#11497

@posva
Copy link
Member

posva commented May 31, 2021

The error comes from replit not implementing the needed functionality

@posva posva closed this as completed May 31, 2021
@07akioni
Copy link
Contributor Author

07akioni commented Jun 1, 2021

@posva The original example is simplified to help people find the crucial part.

I've update it. Now it is the original logic extracted from a vue test case. The error happens in the same way.

@posva
Copy link
Member

posva commented Jun 1, 2021

the code sample runs fine in node 14:

// index.mjs
import { createApp, resolveComponent, h } from 'vue'
import { renderToStream as _renderToStream } from '@vue/server-renderer'

const app = createApp({
  render() {
    const Foo = resolveComponent('foo')
    return h(Foo)
  },
})
app.component('foo', {
  render: () => h('div', 'foo'),
})

const promisifyStream = (stream) => {
  return new Promise((resolve, reject) => {
    let result = ''
    console.log('ondata')
    stream.on('data', (data) => {
      result += data
    })
    stream.on('error', () => {
      reject(result)
    })
    stream.on('end', () => {
      resolve(result)
    })
  })
}

const renderToStream = (app) => promisifyStream(_renderToStream(app))

renderToStream(app).then((v) => {
  console.log(v)
})

Do you have a boiled down reproduction that fails?

@07akioni
Copy link
Contributor Author

07akioni commented Jun 1, 2021

the code sample runs fine in node 14:

// index.mjs
import { createApp, resolveComponent, h } from 'vue'
import { renderToStream as _renderToStream } from '@vue/server-renderer'

const app = createApp({
  render() {
    const Foo = resolveComponent('foo')
    return h(Foo)
  },
})
app.component('foo', {
  render: () => h('div', 'foo'),
})

const promisifyStream = (stream) => {
  return new Promise((resolve, reject) => {
    let result = ''
    console.log('ondata')
    stream.on('data', (data) => {
      result += data
    })
    stream.on('error', () => {
      reject(result)
    })
    stream.on('end', () => {
      resolve(result)
    })
  })
}

const renderToStream = (app) => promisifyStream(_renderToStream(app))

renderToStream(app).then((v) => {
  console.log(v)
})

Do you have a boiled down reproduction that fails?

.mjs works for me too. However please try cjs. My node version is v14.17.0.

https://github.com/07akioni/vue-ssr-bug-reprod (the same example)

The mjs and cjs modes seem to have some difference underhood.

➜  vue-ssr git:(main) NODE_DEBUG=stream node work.mjs 
STREAM 75760: resume
STREAM 75760: readableAddChunk <div>foo</div>
STREAM 75760: readableAddChunk null
STREAM 75760: onEofChunk
STREAM 75760: emitReadable false false
STREAM 75760: emitReadable true
STREAM 75760: resume false
STREAM 75760: read 0
STREAM 75760: flow true
STREAM 75760: read undefined
STREAM 75760: need readable false
STREAM 75760: length less than watermark true
STREAM 75760: reading or ended false
STREAM 75760: endReadable false
STREAM 75760: read undefined
STREAM 75760: endReadable false
STREAM 75760: read 0
STREAM 75760: endReadable false
STREAM 75760: emitReadable_ false 0 true
STREAM 75760: flow true
STREAM 75760: read undefined
STREAM 75760: endReadable false
STREAM 75760: endReadableNT false 0
STREAM 75760: endReadableNT true 0
STREAM 75760: endReadableNT true 0
STREAM 75760: endReadableNT true 0
<div>foo</div>
➜  vue-ssr git:(main) NODE_DEBUG=stream node notwork.cjs.js 
STREAM 75780: resume
STREAM 75780: resume false
STREAM 75780: read 0
STREAM 75780: need readable false
STREAM 75780: length less than watermark true
STREAM 75780: do read
internal/streams/readable.js:642
  throw new ERR_METHOD_NOT_IMPLEMENTED('_read()');
  ^

Error [ERR_METHOD_NOT_IMPLEMENTED]: The _read() method is not implemented
    at Readable._read (internal/streams/readable.js:642:9)
    at Readable.read (internal/streams/readable.js:481:10)
    at resume_ (internal/streams/readable.js:977:12)
    at processTicksAndRejections (internal/process/task_queues.js:82:21) {
  code: 'ERR_METHOD_NOT_IMPLEMENTED'
}

@posva posva reopened this Jun 1, 2021
@posva
Copy link
Member

posva commented Jun 1, 2021

I think the problem is you shouldn't be using on('data'), which creates the need for read() but I'm really not sure.

@07akioni
Copy link
Contributor Author

07akioni commented Jun 1, 2021

I think the problem is you shouldn't be using on('data'), which creates the need for read() but I'm really not sure.

All the test cases do with events. I'm not quite good at node. Is there any best practice?

iwusong pushed a commit to iwusong/core that referenced this issue May 13, 2022
@github-actions github-actions bot locked and limited conversation to collaborators Sep 28, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
2 participants