preactjs/wmr

Error output during prerender `Error: Use "renderToStringAsync" for suspenseful rendering.`

takurinton opened this issue · 9 comments

Describe the bug

When I run async prerender using wmr, I get the error Error: Use "renderToStringAsync" for suspenseful rendering..
This is probably because this is a synchronous function, and making this asynchronous solves it.

https://github.com/preactjs/wmr/blob/main/packages/preact-iso/prerender.js#L34

To Reproduce
Steps to reproduce the behavior:

  1. Fork it https://github.com/takurinton/wmr-prerender-error-sample
  2. run npm install && npm run build
  3. The above error should be output

Expected behavior

When I run async prerender using wmr, I get the error Error: Use "renderToStringAsync" for suspenseful rendering..

Bug occurs with:

  • wmr or wmr start (development)
  • wmr build (production)
  • wmr serve

Desktop (please complete the following information):

  • Node Version: 20.8
  • WMR Version: 3.8.0
  • Preact Version: 10.18.1
  • preact-iso Version: 2.4.0

Additional context
Add any other context about the problem here.

@rschristian @developit

I want send a Pull Request about this.
This is probably a bug in preact-iso, which can be solved by making prerender an asynchronous function, but preact-iso currently has split repositories and I'm not sure which one to fix.
Please support me. thank you.

Hey,

WMR unfortunately isn't maintained anymore, I'll add a note to the ReadMe. Vite is what we'd recommend in its place, through @preact/preset-vite. It supports headless prerendering in a very similar way to WMR.

preact-iso has been extracted out, and you can find the new repo here.

@rschristian
Thank you!!

WMR unfortunately isn't maintained anymore

Ok, It's sad 😢 , but I understand.
I have an additional question. Does this mean that preact-iso will be maintained as a stand-alone product in the future?

I have an additional question. Does this mean that preact-iso will be maintained as a stand-alone product in the future?

Indeed it will! There's already been a couple changes to it since it left the repo, which you can see here.

@rschristian
This bug occurs in wmr's prerender, do I need to fix preact-iso this time?
I haven't investigated whether it occurs in other environments, but I think it's natural to call renderToStringAsync here.
https://github.com/preactjs/preact-iso/blob/main/src/prerender.js#L34

This shouldn't occur in WMR's prerender, as you call renderToString() in your app code (be that from preact-render-to-string, preact-iso, etc). I think (haven't looked into it much myself) we should indeed replace that try..catch block with renderToStringAsync, yup.

In case you were unaware, you can most easily test this outside of WMR by creating a new Preact app w/ create-preact. If you enable routing & prerendering, I think you'll just need to insert a lazy import (as the WMR template has) to reproduce.

@rschristian

This shouldn't occur in WMR's prerender,

This error occurs in projects created with create-wmr. The code is here.
https://github.com/takurinton/wmr-prerender-error-sample

I think (haven't looked into it much myself) we should indeed replace that try..catch block with renderToStringAsync, yup.

I created this in preact-iso. preactjs/preact-iso#10

This error occurs in projects created with create-wmr. The code is here.

Sure, but the actual error is in using preact-iso in user-code. It's not something that occurs within WMR's prerender is all.

I created this in preact-iso. preactjs/preact-iso#10

Thanks!

Going to close this on out, as there's nothing actionable for WMR even if it were maintained.

Thanks again for raising this!