[react - prerender issue] vite-plugin-ssr + tanstack query

[YannBirba]

Description

SSG issue with tanstack query

Explanation

I was investigating how to implement tanstack query with vite-plugin-ssr with react, so I found an interesting repo on github, so I forked it.

SSR is looking to work correctly in development as in production.
When you turn on "prerender" option in ssr plugin in vite config to switch to ssg rendering, the "npm run prod" command never ends and stuck just after the static rendering logs. All is working if I abort the command line and run "npm run server:prod" but ...

Then, I tried to run the build without prerender and then switch prerender option to true to finaly launch prerender only with "npx vite-plugin-ssr prerender" and I got the error.

The error appen every time I try to prerender a page with a tanstack-query data prefetching in it.

Environnement:

I'm using wsl and pnpm with latest node version

• WSL version : 1.1.6.0
• Node.js : v19.8.1
• npm version : 9.5.1
• pnpm version : 8.1.1

Repo

You can look at my fork here if it can help : https://github.com/YannBirba/vite-ssr-with-react-query

Maybe i'm missing something idk ...
Thank you for the amazing job with this plugin !
Hope I can make an example with tanstack-query for the plugin in the future.

Error Message + Error Stack

$ pnpm vite-plugin-ssr prerender

vite-plugin-ssr v0.4.112 pre-rendering HTML...

/home/yann/dev/react/vite-ssr-with-react-query/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-ssr/dist/cjs/node/cli/bin.js:43
    throw rejectValue;
    ^

Error: [[email protected]][Bug] You stumbled upon a bug in vite-plugin-ssr's source code. Go to https://github.com/brillout/vite-plugin-ssr/issues/new and copy-paste this error. (The error's stack trace is usually enough to fix the problem). A maintainer will fix the bug (usually under 24 hours). Don't hesitate to reach out as it makes vite-plugin-ssr more robust. Debug info (this is for the vite-plugin-ssr maintainers; you can ignore this): /renderer/_error.page.tsx
    at assertExportNames (/home/yann/dev/react/vite-ssr-with-react-query/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-ssr/dist/cjs/node/prerender/runPrerender.js:127:24)
    at Array.forEach (<anonymous>)
    at runPrerender (/home/yann/dev/react/vite-ssr-with-react-query/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-ssr/dist/cjs/node/prerender/runPrerender.js:47:32)
    at async CAC.<anonymous> (/home/yann/dev/react/vite-ssr-with-react-query/node_modules/.pnpm/[email protected][email protected]/node_modules/vite-plugin-ssr/dist/cjs/node/cli/bin.js:15:5)

[brillout]

I cannot reproduce [Bug] You stumbled upon a bug in vite-plugin-ssr's source code.. What are your exact reproduction steps?

[YannBirba]

You just need to build with prerender false in vite config and then only run the prerender script to throw the error.

[brillout]

I could reproduce the fact that $ pnpm exec vite-plugin-ssr prerender doesn't exit. But I suspect that some of your dependency is pushing something to the event loop that doesn't yield. I'd inspect why the event queue isn't emtpy after VPS has finished pre-rendering. (VPS's prerender script lives at node_modules/vite-plugin-ssr/dist/cjs/node/prerender/runPrerender.js.)

[brillout]

You just need to build with prerender false in vite config and then only run the prerender script to throw the error.

I could reproduce indeed. Although I'm not sure what you expect $ vite-plugin-ssr prerender to do when prerender is false. Although the error message should be improved.

[brillout]

Although the error message should be improved.

Done. b60420b

[brillout]

Moving the issue to discussions because it seems like a problem unrelated to VPS. But let me know if you believe it's a VPS problem, or if VPS can do something to unblock your situation.

Keep us updated about your findings.

And, yes, a new tanstack query example is very much welcome 💚.

[YannBirba]

Thank you for your help.

[YannBirba]

I just found the issue, if anyone is interested i pushed my fix here : YannBirba/vite-ssr-with-react-query prerender commit fix

QueryClient setting in _default.page.server.tsx was the issue and especially the cachetime.

I noticed during some tests that prerender script need to wait during all the cachetime before ending the script.

So the fix is to remove the cachetime and set it to 0, the script don't need anymore to wait during cachetime and the command ends as expected.

[brillout]

Thanks for circling back. I've added your example and this discussion to https://vite-plugin-ssr.com/react-query.

Btw. in case you think you can convince your employer: https://github.com/sponsors/brillout.

[brillout]

Thanks for starting sponsoring 💚. Next step is to convince a company (but I know it's hard 🙂).

I truly appreciate it.

[YannBirba]

Thank you! Happy to be part of the project.

I will do a clean example with a readme.

I just became one of your sponsor, love your work and you deserve it.

[brillout]

Thank you for your kind words. Looking forward to that polished example.