When any component is blocked by an Ad Blocker all functionallity is killed

[Mitcheljager]

Describe the bug

When any component is blocked by an Ad Blocker the whole site crashes and any functionality seizes to function. The error reads TypeError: error loading dynamically imported module.

TypeError: error loading dynamically imported module app.js:18:41
    handleError https://sveltejskittemplatedefault1rva-145l--5173--bf38680a.local-corp.webcontainer.io/@fs/home/projects/sveltejs-kit-template-default-1rvavc/.svelte-kit/generated/client/app.js:18
    handle_error https://sveltejskittemplatedefault1rva-145l--5173--bf38680a.local-corp.webcontainer.io/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=f589e44a:1313
    _hydrate https://sveltejskittemplatedefault1rva-145l--5173--bf38680a.local-corp.webcontainer.io/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=f589e44a:1787

I am using uBlock Origin on FireFox and Chrome. We've had other reports from this happening using AdBlock on Chrome. On Safari the issue seemed to be more muted, with the site still functioning despite the components being blocked as expected, but I was not able to confirm this myself.

Additionally in our project the page begins to redirect infinitely to itself, causing a constant looping reload. I could however not reproduce this in a clean project, but I thought it was worth noting.

Reproduction

1. Create a clean project
2. Add any component that is likely to get picked up by an Ad Blocker. In my case I went for the name "ExternalAd.svelte"
3. Import it into the layout file
4. Turn on Ad Blocker and refresh the page
5. You should see errors in the console, as well as not being able to interact with any interactive components, for example the - and + buttons.

Here is an example of a completely clean project, there is nothing new in there except for the ExternalAd.svelte component

https://stackblitz.com/edit/sveltejs-kit-template-default-1rvavc?file=src%2Froutes%2F%2Blayout.svelte

I tested it locally as well, and the same happens as on the StackBlitz page.

Logs

Uncaught (in promise) TypeError: error loading dynamically imported module start.js:28:1
    start http://localhost:5173/@fs/C:/Sites/sveltekit-ad-test/node_modules/@sveltejs/kit/src/runtime/client/start.js:28
    AsyncFunctionThrow self-hosted:814
    (Async: async)
    <anonymous> http://localhost:5173/:216
    (Async: promise callback)
    <anonymous> http://localhost:5173/:215

TypeError: error loading dynamically imported module app.js:18:41
    handleError https://sveltejskittemplatedefault1rva-145l--5173--bf38680a.local-corp.webcontainer.io/@fs/home/projects/sveltejs-kit-template-default-1rvavc/.svelte-kit/generated/client/app.js:18
    handle_error https://sveltejskittemplatedefault1rva-145l--5173--bf38680a.local-corp.webcontainer.io/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=f589e44a:1313
    _hydrate https://sveltejskittemplatedefault1rva-145l--5173--bf38680a.local-corp.webcontainer.io/node_modules/@sveltejs/kit/src/runtime/client/client.js?v=f589e44a:1787

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-9700KF CPU @ 3.60GHz   
    Memory: 13.74 GB / 31.92 GB
  Binaries:
    Node: 18.0.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - C:\Program Files (x86)\Yarn\bin\yarn.CMD 
    npm: 8.6.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 114.0.5735.110
    Edge: Spartan (44.19041.1266.0), Chromium (114.0.1823.37)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.1.0
    @sveltejs/kit: ^1.5.0 => 1.20.2
    svelte: ^3.54.0 => 3.59.1
    vite: ^4.3.0 => 4.3.9

Severity

blocking all usage of SvelteKit

Additional Information

This issue might be related; #2699

[dummdidumm]

I don't see how SvelteKit should be able to recover from any of this. If a JavaScript file is blocked from executing that is needed for the site to function, it will obviously crash in unexpected ways. What are you imagining should happen in such a case?

[Mitcheljager]

It would be nice if it could fail silently. Components like this are optional, and I'm fine with them not executing at all. But even in cases where I do want component to execute, there are going to be cases where Adblockers falsely flag a particular file. The entire site not working because of that is just not a viable outcome.

Adblockers are very present and used by a large enough portion of users that we can't realistically just ignore them.

[dummdidumm]

How should Svelte(Kit) know that components "like this" are optional? We can't know, and safeguarding every possible import to fail within the code isn't practical either.

In general, in situations like this it's best to try to architect the site in such a way that it also works without JavaScript so that things like this aren't that impactful.

[7nik]

I use uBlock Origin on Chromium, but it blocks nothing on both stackblitz and localhost.

I suppose, a dynamic import and svelte:component is a workaround.

[Mitcheljager]

Here's a thought. The files are blocked purely based on the filename. What if there was a parameter that could be toggled to randomize the filenames for each component, setting them to random strings?