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

[eikaramba]

TableOfContents.svelte:4:35

3 | import * as $ from 'svelte/internal/server';
4 | import { createEventDispatcher, onDestroy, onMount } from 'svelte';
5 | import 'svelte/elements';
| ^
6 | import { BROWSER } from 'esm-env';
7 | import { buildTree } from '@layerstack/utils/array';

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

likely related to https://johnnyreilly.com/typescript-5-importsnotusedasvalues-error-eslint-consistent-type-imports#no-import-type-side-effects. i guess changing TableOfContent.svelte file to use import type { HTMLAttributes } from 'svelte/elements'; would fix it?

[techniq]

Hey @eikaramba 👋. Looks like you are using svelte-ux@latest (1.0.0). svelte-ux@next (upcoming 2.0.0) has this change already applied.

svelte-ux@next has been migrated to Tailwind 4 and also improved icon support, and hope to start the big Svelte 5 state/snippet migration soon (like layerchart@next).

The LayerChart docs, Github Analysis, Strava Analysis, and my primary work projects are all using @next releases.

Not sure if you are in a position to give svelte-ux@next a try though (mostly using Tailwind 4).

[eikaramba]

i'm using next version already, here is my package.json

"dependencies": {
        "@internationalized/date": "^3.8.2",
        "@layerstack/tailwind": "2.0.0-next.17",
        "@lucide/svelte": "^0.525.0",
        "@sveltejs/adapter-node": "^5.2.13",
        "@sveltejs/kit": "^2.25.1",
        "set-cookie-parser": "^2.7.1",
        "svelte": "^5.36.8",
        "svelte-preprocess": "^6.0.3",
        "svelte-ux": "2.0.0-next.15",
        "tslib": "^2.8.1",
    },
    "devDependencies": {
        "@eslint/js": "^9.31.0",
        "@iconify-json/fa6-solid": "^1.2.2",
        "@iconify-json/lucide": "^1.2.58",
        "@iconify-json/tabler": "^1.2.11",
        "@inlang/paraglide-js": "2.2.0",
        "@inlang/plugin-message-format": "4.0.0",
        "@sveltejs/vite-plugin-svelte": "^6.1.0",
        "@tailwindcss/forms": "^0.5.10",
        "@tailwindcss/typography": "^0.5.16",
        "@tailwindcss/vite": "^4.1.11",
        "eslint": "^9.31.0",
        "prettier": "^3.6.2",
        "sveltekit-flash-message": "^2.4.6",
        "sveltekit-superforms": "^2.27.1",
        "tailwindcss": "^4.0.0",
        "typescript": "^5.8.3",
        "typescript-eslint": "^8.38.0",
        "unplugin-icons": "^22.1.0",
        "vite": "^7.0.5",
        "vite-imagetools": "^7.1.0"
    },

in the link you provided i still see the wrong format:

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

it should be:

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

no? i have to admit i am not versatile with typescript, so please take this just as a guess. i just installed everything from scratch with latest dependencies etc. and got this error. all other files are also vanilla from npx sv create - quite strange that i get this error and you don't.

maybe to help you understand, from the link i provided the problem description is that the typescript compiler is changing the inline type imports to just import 'svelte/elements'; which is of course wrong. i was also confused by this, because what i see in the source for the error is not equal to the sourcode :P but yeah, that is because of this inline type import. you can read also here about this "effect":
https://typescript-eslint.io/rules/no-import-type-side-effects/

[techniq]

Very interesting. What is the contents of your tsconfig.json. Most of my projects are just:

{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "skipLibCheck": true
  }
}

• https://github.com/techniq/strava-analysis/blob/main/tsconfig.json
• https://github.com/techniq/github-analysis/blob/main/tsconfig.json

but some are a little more robust (the last one was my most recently created project using sv.

{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "module": "NodeNext",
    "moduleResolution": "NodeNext"
  }
  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
  //
  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
  // from the referenced tsconfig.json - TypeScript does not merge them in
}

{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		"allowJs": true,
		"checkJs": true,
		"esModuleInterop": true,
		"forceConsistentCasingInFileNames": true,
		"resolveJsonModule": true,
		"skipLibCheck": true,
		"sourceMap": true,
		"strict": true,
		"moduleResolution": "bundler"
	}
	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
	//
	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
	// from the referenced tsconfig.json - TypeScript does not merge them in
}

• https://github.com/techniq/layerchart/blob/main/packages/layerchart/tsconfig.json

I think it comes down to verbatimModuleSyntax, which should be true (default)

Also, you'e set <script lang="ts"> in your component, right?

[techniq]

@eikaramba If you can share a repo, I'll take a look and see what I can spot.

[eikaramba]

@techniq i wanted to quickly test it again and guess what. it works now :) i have absolutely no clue and from my git history there is not much that has changed. here is my tsconfig.json - i have not really changed anything.

{
    "extends": "./.svelte-kit/tsconfig.json",
    "compilerOptions": {
        "allowJs": true,
        "checkJs": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true,
        "moduleResolution": "bundler",
        "rootDirs": [
            ".",
            "./.svelte-kit/types",
            "./$houdini/types"
        ]
    }
}

I guess the solution to this problem was to quit sitting at the desk and going for a run (btw will use your strava stats now, exactly what i needed!) will reopen should i experience the problem again.

[techniq]

Great to hear! Going out for a run (or walk or ride) helps me as well 😁

[techniq]

@eikaramba Oddly, I recently started encountering this while updating deps on a project.

I updated the type import in TableOfContents (like you suggested) from

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

to

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

and released svelte-ux@2.0.0-next.18

See also related Svelte issues:

• Error when running dev server: No known conditions for "./action" specifier in "svelte" package [plugin vite:dep-scan] sveltejs/svelte#15236
• Svelte 5: [commonjs--resolver] No known conditions for "./elements" specifier in "svelte" package sveltejs/svelte#15367

---

Also forgot to mention earlier, but we have a Svelte JS Strava club you should join (if interested).

[eikaramba]

sounds good, glad i was of help. i also joined the strava club :) already on 10th place 🥇 rich is on 23rd. well... at least something i am better at laughing

[techniq]

Very nice! Sadly I hurt my ankle at the end of 2024 and never fully recovered, and mostly only walk with the wife anymore. I've considered multiple times getting back on Zwift for some virtual rides again though.

[eikaramba]

oh no i'm sorry to hear that can totally relate to that. you did quite some mileage before. heck you did walk more than i did running :) wish you all the best.

btw: i'm using ux svelte now in a project, for form stuff it is incredibly useful. there are a few things that came up where i thought it could be improved will see if they are actually worth a new ticket here.