Property 'fetchpriority' does not exist on type 'HTMLProps<HTMLImageElement>'

[The-Noah]

I'm using the fetchpriority property on an <img> tag and it is causing svelte-check to error.

Error: Type '{ src: string; alt: string; fetchpriority: string; }' is not assignable to type 'HTMLProps<HTMLImageElement>'.
  Property 'fetchPriority' does not exist on type 'HTMLProps<HTMLImageElement>'. (ts)
    <img src={utils.getAvatarURL(profile)} alt={profile.username} fetchpriority="high" />

MDN source: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchPriority

[jasonlyu123]

According to MDN, This is an experimental attribute with poor browser compatibility. I think we will add this later. In the meanwhile, you can add a typedef to enhance it. Read more here: https://github.com/sveltejs/language-tools/blob/master/docs/preprocessors/typescript.md#im-using-an-attributeevent-on-a-dom-element-and-it-throws-a-type-error

Do keep in mind that we'll have a new way to enhance typing in the coming weeks. I'll add an update then.

[effulgentsia]

Chrome and Safari now support it. Thank you for the link in the above comment, which looks like the contents in there were updated in late 2022 as promised. That seems like a reasonable way to use fetchpriority in the meantime until this issue is fixed.

[jasonlyu123]

The type for fetchpriority is added in svelte 4.2.10. Update your local svelte version to the latest should solve it. But if you're still using Svelte 3 and prefer to update later, you'll have to enhance the type with the method linked above. The types of elements are moved to the svelte core and are no longer tracked in language tools.

[effulgentsia]

I updated to Svelte 5.0.0-next.66, but VSCode is still flagging fetchpriority as:

Object literal may only specify known properties, and '"fetchpriority"' does not exist in type 'HTMLProps<"img", HTMLAttributes<any>>'. ts(2353)

However, I notice that the Svelte VSCode extension 108.2.2 internally still uses Svelte 3:

> head -3 ~/.vscode/extensions/svelte.svelte-vscode-108.2.2/node_modules/svelte/package.json
{
  "name": "svelte",
  "version": "3.59.2",

Could that be the problem?

[effulgentsia]

Never mind. The problem is I had my workspace opened in VSCode as an untrusted workspace. When I trusted the workspace, it found the fetchpriority type definition. Apparently the Svelte VSCode extension doesn't run on untrusted workspaces.