svelte
svelte copied to clipboard
[Svelte 5] get_setters: proto is null (Firefox)
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.
-
pnpm i
-
pnpm dev:firefox
- 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