No known conditions for "./elements" specifier in "svelte" package

[willianctti]

Describe the bug

Utilizing the svelte 5 i receive ths error when i run "pn dev" in my bash. I received the suggestion of a dwongrade for Svelte 4. Would it help?

Reproduction

No known conditions for "./elements" specifier in "svelte" package [plugin vite:dep-scan]

    script:/myProject/src/lib/components/Input.svelte?id=0:19:7:
      19 │ import 'svelte/elements'
         ╵        ~~~~~~~~~~~~~~~~~

  This error came from the "onResolve" callback registered here:

    node_modules/.pnpm/esbuild@0.21.5/node_modules/esbuild/lib/main.js:1150:20:
      1150 │       let promise = setup({
           ╵                     ^

Logs

No response

System Info

No known conditions for "./elements" specifier in "svelte" package [plugin vite:dep-scan]

Severity

blocking all usage of svelte

[dummdidumm]

Svelte does provide an elements specifier, but it's for types only. Judging from the error message you're doing import 'svelte/elements' which means this is a value import, but svelte/elements only provides types. I'm not sure what you want to achieve with that import, I would just remove that line.

If that's not it, then please provide a reproduction, else we can't look into it.

[willianctti]

thanks a lot. Looking at import, the import shortcut imported the type incorrectly. The right thing to do is to import the type out, like this:

	import type { HTMLButtonAttributes } from 'svelte/elements';

[emmnull]

For others stumbling here in the future, this problem is likely related to unwanted inline type imports side-effects (briefly explained here: https://johnnyreilly.com/typescript-5-importsnotusedasvalues-error-eslint-consistent-type-imports#no-import-type-side-effects)

[robertkibet]

// this is my custom-types.ts file

- import { type HTMLAttributes as SvelteAttr } from 'svelte/elements';
+ import type { HTMLAttributes as SvelteAttr } from 'svelte/elements';

declare module 'svelte/elements' {
  export interface SvelteHTMLElements<T> {
    'custom-data-attribute': SvelteAttr<HTMLElement>;
  }
}

export {};

and things started working well, the type import was the one that caused things to break