Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Mitcheljager opened this issue Jun 7, 2023 · 5 comments

Comments

@Mitcheljager
Copy link

Mitcheljager commented Jun 7, 2023

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

@Mitcheljager Mitcheljager changed the title When any component is blocked by an Ad Blockers all functionallity is killed When any component is blocked by an Ad Blocker all functionallity is killed Jun 8, 2023
@dummdidumm
Copy link
Member

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
Copy link
Author

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
Copy link
Member

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
Copy link

7nik commented Jul 10, 2023

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
Copy link
Author

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?

@eltigerchino eltigerchino closed this as not planned Won't fix, can't repro, duplicate, stale Oct 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants