search

sveltejs / svelte

Cybernetically enhanced web apps
https://svelte.dev
MIT License
79.03k stars 4.15k forks source link

[Svelte 5] get_setters: proto is null (Firefox) #13691

Closed ZerGo0 closed 1 day ago

ZerGo0 commented 3 days ago

Describe the bug

Firstly, I'm not 100% sure if this combination of libraries is supported (svelte 4 libs in svelte 5). I tried to reproduce it in a normal svelte project, but I wasn't able to reproduce it there.

I'm currently working on porting a browser extension over to svelte 5. In the final testing phase, I noticed that the Firefox version couldn't render any components. The chrome version worked just fine.

I'm using wxt as the browser extension framework and shadcn-svelte and lucide icon for basic components/icons. All of them are still using svelte 4. When I use any components from those libraries, I get the following error: TypeError: proto is null

The exception gets thrown because the while loop in attributes.js/get_setters never breaks and eventually tries to get the prototype of the JS Object which doesn't have a prototype. The next iteration throws the exception. All the prototypes that get used in that function don't have the name attribute in this case, which is why it doesn't break out of the while loop.

Reproduction

https://github.com/ZerGo0/ftv-svelte5-reprod

This project uses pnpm.

I tried my best to make the example as small as possible. It's a pretty specific use case, all my elements are inside a shadow-root.

  1. pnpm i
  2. pnpm dev:firefox
  3. This will open up firefox and open up google.com. The exception should get logged in the dev console.

Logs

get_setters (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/dom/elements/attributes.js#323)
set_attributes (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/dom/elements/attributes.js#179)
1 (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/content-scripts/main.js#25994)
update_reaction (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/runtime.js#313)
update_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/runtime.js#480)
create_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/reactivity/effects.js#124)
render_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/reactivity/effects.js#315)
template_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/reactivity/effects.js#328)
1 (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/content-scripts/main.js#25994)
element (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/dom/blocks/svelte-element.js#137)
update_reaction (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/runtime.js#313)
update_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/runtime.js#480)
create_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/reactivity/effects.js#124)
branch (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/reactivity/effects.js#344)
element (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/dom/blocks/svelte-element.js#98)
update_reaction (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/runtime.js#313)
update_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/runtime.js#480)
create_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/reactivity/effects.js#124)
block (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/reactivity/effects.js#336)
element (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/dom/blocks/svelte-element.js#69)
1 (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/content-scripts/main.js#25987)
if_block (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/dom/blocks/if.js#76)
update_reaction (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/runtime.js#313)
update_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/runtime.js#480)
create_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/reactivity/effects.js#124)
branch (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/reactivity/effects.js#344)
if_block (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/dom/blocks/if.js#76)
update_reaction (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/runtime.js#313)
update_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/runtime.js#480)
create_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/reactivity/effects.js#124)
block (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/reactivity/effects.js#336)
if_block (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/dom/blocks/if.js#40)
Button$1 (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/content-scripts/main.js#25911)
Button (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/content-scripts/main.js#46407)
EmoteMenuButton (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/content-scripts/main.js#46477)
_mount (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/render.js#249)
update_reaction (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/runtime.js#313)
update_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/runtime.js#480)
create_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/reactivity/effects.js#124)
branch (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/reactivity/effects.js#344)
_mount (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/render.js#231)
update_reaction (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/runtime.js#313)
update_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/runtime.js#480)
create_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/reactivity/effects.js#124)
effect_root (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/reactivity/effects.js#244)
_mount (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/render.js#228)
mount (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/svelte@5.0.0-next.270/node_modules/svelte/src/internal/client/render.js#86)
onMount (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/src/lib/entryPoints/emoteMenuButton.ts#11)
mount (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/wxt@0.19.11_@types+node@22.7.6_rollup@4.24.0/node_modules/wxt/dist/client/content-scripts/ui/index.mjs#80)
emoteMenuButton (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/src/lib/entryPoints/emoteMenuButton.ts#23)
main (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/src/entrypoints/main.content.ts#16)
main (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/src/entrypoints/main.content.ts#10)
main (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/src/entrypoints/main.content.ts#9)
result (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/content-scripts/main.js#46547)
main (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/content-scripts/main.js#46555)
<anonymous> (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/content-scripts/main.js#46557)

System Info

System:
    OS: Linux 6.11 EndeavourOS
    CPU: (4) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
    Memory: 9.17 GB / 15.32 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 22.10.0 - /usr/bin/node
    npm: 10.9.0 - /usr/bin/npm
    pnpm: 9.9.0 - ~/.local/share/pnpm/pnpm
  Browsers:
    Chromium: 130.0.6723.58
  npmPackages:
    svelte: 5.0.0-next.270 => 5.0.0-next.270

Severity

blocking an upgrade

dummdidumm commented 3 days ago

Sounds like the instanceof check doesn't properly work within an extension context, so we should guard against falsy values as well - though in curious why Firefox behaves this way

ZerGo0 commented 3 days ago

I'm not sure if a simple null check would be a good enough fix. It would still fill the setters cache with stuff that usually wouldn't be in there, but this would fix the issue that I have. Not sure if the prototype constructor name is used anywhere else, either.

stalkerg commented 2 days ago

Can you open bug ticket on firefox bugzilla as well?

ZerGo0 commented 2 days ago

Can you open bug ticket on firefox bugzilla as well?

Here is the bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1925835

It seems like it's messed up because of the sandbox.