I am having some issues with the new v3 implementation.
Putting it simple:
Its throwing errors on HTML Slot elements when using svelte:element with this="slot"
<svelte:element
this="slot"
bind:this={slot}
/>
More precisely here is the error:
Oops! Something went wrong! :(
ESLint: 8.45.0
TypeError: Cannot create property 'isJS' on string 'slot'
at printJS$1 (/home/kite/Git/f8notes/node_modules/.pnpm/registry.npmjs.org+prettier-plugin-svelte@3.0.2_prettier@3.0.0_svelte@4.1.1/node_modules/prettier-plugin-svelte/plugin.js:2184:25)
at embed (/home/kite/Git/f8notes/node_modules/.pnpm/registry.npmjs.org+prettier-plugin-svelte@3.0.2_prettier@3.0.0_svelte@4.1.1/node_modules/prettier-plugin-svelte/plugin.js:1987:13)
at recurse (file:///home/kite/Git/f8notes/node_modules/.pnpm/registry.npmjs.org+prettier@3.0.0/node_modules/prettier/index.mjs:18002:20)
at AstPath.each (file:///home/kite/Git/f8notes/node_modules/.pnpm/registry.npmjs.org+prettier@3.0.0/node_modules/prettier/index.mjs:17303:9)
at recurse (file:///home/kite/Git/f8notes/node_modules/.pnpm/registry.npmjs.org+prettier@3.0.0/node_modules/prettier/index.mjs:17997:15)
at AstPath.each (file:///home/kite/Git/f8notes/node_modules/.pnpm/registry.npmjs.org+prettier@3.0.0/node_modules/prettier/index.mjs:17303:9)
at recurse (file:///home/kite/Git/f8notes/node_modules/.pnpm/registry.npmjs.org+prettier@3.0.0/node_modules/prettier/index.mjs:17997:15)
at AstPath.each (file:///home/kite/Git/f8notes/node_modules/.pnpm/registry.npmjs.org+prettier@3.0.0/node_modules/prettier/index.mjs:17303:9)
at recurse (file:///home/kite/Git/f8notes/node_modules/.pnpm/registry.npmjs.org+prettier@3.0.0/node_modules/prettier/index.mjs:17997:15)
at AstPath.call (file:///home/kite/Git/f8notes/node_modules/.pnpm/registry.npmjs.org+prettier@3.0.0/node_modules/prettier/index.mjs:17265:14)
Why am I using "svelte:element" to create a slot?
To output a pure HTML slot element (not a SVELTE SLOT!), to use later with HTML Web Components (outside of the current project scope, like a lib of sorts). HTML WEB COMPONENTS SLOT REFERENCE
My code base uses:
pnpm
sveltekit
eslint
eslint-plugin-svelte
prettier
pretter-plugin-svelte
I debugged the code a bit and reached the following conclusions:
Looks like node[name] is a string not an object, so setting any property to it results in a TypeError
I am not familiar with prettier or prettier-plugin-svelte 's architecture, so I am just guessing here:
Do svelte:elements or just pure tags have node[name] as strings? if so, can we just add an extra condition to the early return with typeof node[name] !== 'object' or typeof node[name] === 'string' ?. On my end, this fixed the issue and prettier started running just fine!
Seems to happen only when used alongside eslint? I cant trigger it without eslint.
Happy to submit a PR, but again, I am not familiar with these projects, I only use them, never worked on them.
I am having some issues with the new v3 implementation. Putting it simple:
svelte:element
withthis="slot"
Why am I using "svelte:element" to create a slot?
My code base uses:
I debugged the code a bit and reached the following conclusions:
node[name]
is astring
not an object, so setting any property to it results in aTypeError
prettier
orprettier-plugin-svelte
's architecture, so I am just guessing here:svelte:elements
or just pure tags havenode[name]
as strings? if so, can we just add an extra condition to the early return withtypeof node[name] !== 'object'
ortypeof node[name] === 'string' ?
. On my end, this fixed the issue and prettier started running just fine!Happy to submit a PR, but again, I am not familiar with these projects, I only use them, never worked on them.