Question about react streaming

[boga001]

I created a new vite react using Bati with express, tailwind, vite and react.

When I serve the dev or preview I get this message in console about userAgent:

[[email protected]][Warning] HTML streaming (https://vike.dev/streaming) disabled because User Agent is unknown: make sure to provide pageContext.userAgent (typically with renderPage({ userAgent: req.headers['user-agent'] }), see https://vike.dev/renderPage) (so that HTML streaming can be disabled for bots such as Google Bot).

When I add userAgent in vike-handler.ts:

const pageContextInit = { ...context, urlOriginal: request.url, userAgent: request.headers.get('user-agent') };
  const pageContext = await renderPage(pageContextInit);

I get the error message:

Error: [[email protected]][Wrong Usage] Cannot inject following chunk after stream has ended:

What would be the correct way to do this? This is a default fresh install with Bati so maybe this can be improved?

Thanks

[magne4000]

I quickly tried with pnpm create @batijs/app --react --express --tailwindcss and do not have the issue, can you provide a reproduction repository?
Also, which browser, node version, and package manager are you using?

[magne4000]

Nevermind, I managed to get the warning, I'm checking it 👍

[magne4000]

@brillout I might need your help on this one

[brillout]

Is it reproducible without the universal handler part? I can have a look at a reproduction.

[magne4000]

Is it reproducible without the universal handler part? I can have a look at a reproduction.

@brillout It probably works when not using the universal handler (i.e. with node Stream).

I managed to reproduce the issue with Universal Handler with any Server. To reproduce pnpm create @batijs/app --react --hono --tailwind or pnpm create @batijs/app --react --express --tailwind, then edit server/vike-handler.ts to add headersOriginal: request.headers to pageContextInit. Then pnpm run dev and navigate to any page to trigger the issue.

The issue seems to come from react-streaming/src/server/renderToStream/createReadableWrapper.ts being called too soon (for instance, if I just manually set timeout to 1000 it "works" in this particular scenario). I'm not familiar with react-streaming yet, but I can take a look.

So this seems related to ReadableStream only, but I have the feeling that anytime we're using ReadableStream, we might potentially have this issue currently.

[brillout]

but I can take a look.

👍 That'd be great. But let me know how it goes, I can have a look at it as well.

[magne4000]

@brillout I need help to fix vikejs/vike#1718

[magne4000]

In the mean time, I disabled stream by default as it was before.

[brillout]

Fixed. Make sure to update both vike and vike-react to their latest versions.

[boga001]

Thanks guys! 🥳

[brillout]

We refactored a couple of things. The handling of the React stream and its edge cases is now more robust, but let me know if you run into any issue (it's possible that I may have introduced a minor regression in and there).

Btw. in case your company is up for it, we're looking for sponsors which makes a massive difference to the project.