Infinite loading on Firefox

[santicros]

• [x] I have read the troubleshooting section before opening an issue.
• [x] I have tried upgrading iles and vite.

Description 📖

Hey @ElMassimo! Testing locally creating a website with iles and also checking the docs website, I'm finding iles sometimes makes the website load infinitely. I'm attaching a video at the screenshots section so you can see it live.

Locally it has happened to me when creating a Vue component inside a Vue component.

I can only see this problem on my Mac Book Pro running Firefox 94, not on Chrome.

Tried on Incognito without any extension and this problem is also happening!

Reproduction 🐞

The very same docs website has this problem :)

Screenshots 📷

https://user-images.githubusercontent.com/24988424/143696708-99c79875-b8c6-4c96-89e1-cd14d2ba0f9e.mp4

[ElMassimo]

Hi @santicros!

Would you provide more information, such as the console logs?

[santicros]

Hey!! First thanks for your fast response :) Sure, I'll try to give more information, sorry!

On the Published docs website I'm seeing this two console logs:

Content Security Policy: This site (https://iles-docs.netlify.app) has a Report-Only policy without a report URI. CSP will not block and cannot report violations of this policy.

Content Security Policy: The page’s settings observed the loading of a resource at eval (“script-src”). A CSP report is being sent.

I'll try it again locally with a simpler thing to check if I can find where it's causing the problem..

[santicros]

Hey @ElMassimo let me give you a simpler example I've found:

Creating ANY component that has hydration (so has client:____ ) it's giving me this infinite load on Firefox after building the project and previewing it locally.

Be it imported on a page or component, it gives me this problem.

I've created a super simple repro if you want to check it: https://github.com/santicros/iles-repro-infinite-load/blob/main/src/pages/index.vue

[ElMassimo]

@santicros The repo seems to be private, I get a 404 when accessing the link above.

Does the error occur always, or only when opening devtools?

[santicros]

Sorry, made the repo public!

Here's a video of what I'm seeing with the repro. The error always occurs on Firefox, even without opening the devtools :(

Tested the same on Chrome (96) and Safari (14) and don't have any problem :/

https://user-images.githubusercontent.com/24988424/143767246-bccaaea8-cc09-40fb-96af-ba798a3fc6f6.mp4

Let me know if you need more information :)

[ElMassimo]

@santicros Seems like this Firefox bug causes DOM parsing to stop, causing the page to never finish loading.

Removing async from the island script tags would avoid running into this Firefox bug, but it would also negate some performance benefits in other browsers.

Closing, but will investigate to see if there are any simple workarounds that îles can provide out of the box until Firefox fixes this bug.

[ElMassimo]

@santicros Added a workaround in iles@0.6.6 that prevents DOM parsing from being blocked in Firefox.

Once Firefox fixes the issue I'll revert the change.

[santicros]

Amazing finding @ElMassimo! Thanks a lot for your fast fix, it's all working properly now. Hope Firefox fixes the bug soon ;)