nuxt / icon

The <Icon> component, supporting Iconify, Emojis and custom components.
https://stackblitz.com/edit/nuxt-icon-playground?file=app.vue
MIT License
864 stars 37 forks source link

Workerd incompatibility (Cloudflare Workers) #142

Open zsilbi opened 4 months ago

zsilbi commented 4 months ago

Hello!

I've been after these errors for months now.

The script will never generate a response

✘ [ERROR] Uncaught (in response) Error: Promise will never complete.

✘ [ERROR] Uncaught (in promise) Error: Cannot perform I/O on behalf of a different request. I/O objects (such as streams, request/response bodies, and others) created in the context of one request handler cannot be accessed from a different request's handler. This is a limitation of Cloudflare Workers which allows us to improve overall performance.

These pop up in our production log many times daily, we had more than 1800 errors in the last 7 days like this:

image

Finally I was able to reproduce it consistently locally by instantly spamming the freshly started worker with the same SSR page request. (20 request for the same page), but unfortunately the error log contains nothing more than those messages.

After I wrapped all the <Icon> in a custom MyIcon.client.vue component the issue was gone.

I think the problem will be upstream in Iconify but I haven't started to investigate more deeply yet.

More info:

zsilbi commented 4 months ago

I tested the original <Icon> component, and replacing await loadIcon(resolvedIcon.value).catch(() => undefined) with undefined stops the errors.

zsilbi commented 4 months ago

Reproduction: https://github.com/zsilbi/nuxt-icon-workerd

Bobakanoosh commented 4 months ago

Also happens to me. I've similarly narrowed it down to await calls, in my case it's top-level await useAsyncData calls for fetching data for a page.

Found these: https://news.ycombinator.com/item?id=34989560 https://zuplo.com/blog/2022/03/04/the-script-will-never-generate-a-response

But not sure how to fix/prevent this from a Nuxt perspective