svelte icon indicating copy to clipboard operation
svelte copied to clipboard

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

Open ZerGo0 opened this issue 4 months ago • 4 comments

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/[email protected]/node_modules/svelte/src/internal/client/dom/elements/attributes.js#323)
set_attributes (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/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/[email protected]/node_modules/svelte/src/internal/client/runtime.js#313)
update_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/runtime.js#480)
create_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/reactivity/effects.js#124)
render_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/reactivity/effects.js#315)
template_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/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/[email protected]/node_modules/svelte/src/internal/client/dom/blocks/svelte-element.js#137)
update_reaction (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/runtime.js#313)
update_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/runtime.js#480)
create_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/reactivity/effects.js#124)
branch (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/reactivity/effects.js#344)
element (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/dom/blocks/svelte-element.js#98)
update_reaction (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/runtime.js#313)
update_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/runtime.js#480)
create_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/reactivity/effects.js#124)
block (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/reactivity/effects.js#336)
element (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/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/[email protected]/node_modules/svelte/src/internal/client/dom/blocks/if.js#76)
update_reaction (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/runtime.js#313)
update_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/runtime.js#480)
create_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/reactivity/effects.js#124)
branch (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/reactivity/effects.js#344)
if_block (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/dom/blocks/if.js#76)
update_reaction (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/runtime.js#313)
update_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/runtime.js#480)
create_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/reactivity/effects.js#124)
block (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/reactivity/effects.js#336)
if_block (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/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/[email protected]/node_modules/svelte/src/internal/client/render.js#249)
update_reaction (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/runtime.js#313)
update_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/runtime.js#480)
create_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/reactivity/effects.js#124)
branch (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/reactivity/effects.js#344)
_mount (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/render.js#231)
update_reaction (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/runtime.js#313)
update_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/runtime.js#480)
create_effect (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/reactivity/effects.js#124)
effect_root (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/reactivity/effects.js#244)
_mount (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/node_modules/svelte/src/internal/client/render.js#228)
mount (moz-extension://ee73ff86-b902-4559-9546-95c2bfd0494d/node_modules/.pnpm/[email protected]/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/[email protected]_@[email protected][email protected]/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

ZerGo0 avatar Oct 19 '24 09:10 ZerGo0