`SuperDebug` import broken on Svelte 5

[thebrandonlucas]

• Before posting an issue, read the FAQ and search the previous issues.

Description
Importing SuperDebug from sveltekit-superforms as recommended in #592 throws the following error in the client console: SyntaxError: The requested module '/node_modules/.vite/deps/sveltekit-superforms.js?v=0b083f3c' does not provide an export named 'SuperDebug' (at +page.svelte:2:11)

If applicable, a MRE
https://github.com/thebrandonlucas/sveltekit-superforms-svelte5-broken

[ciscoheat]

A possible solution would be to use package.json instead of import in the library itself. For reference:

"./SuperDebug5.svelte": {
  "types": "./dist/client/SuperDebugRuned.svelte.d.ts",
  "svelte": "./dist/client/SuperDebugRuned.svelte"
}

[thebrandonlucas]

A possible solution would be to use package.json instead of import in the library itself. For reference:

@ciscoheat This pointed me in the right direction. Looking in dist/index.js, I saw:

import SuperDebug from './client/SuperDebug.svelte';
export default SuperDebug;
//export { default as SuperDebug } from './client/SuperDebugRuned.svelte';
export { SuperFormError, SchemaError } from './errors.js';
// Everything from client/index.ts
export { superForm, intProxy, numberProxy, booleanProxy, dateProxy, fieldProxy, formFieldProxy, stringProxy, arrayProxy, fileProxy, fileFieldProxy, filesProxy, filesFieldProxy, defaults, defaultValues, schemaShape, actionResult, superValidate, message, setMessage, setError, withFiles, removeFiles, fail } from './client/index.js';
export { splitPath } from './stringPath.js';
export { mergeFormUnion } from './utils.js';

Locally uncommenting the line:
//export { default as SuperDebug } from './client/SuperDebugRuned.svelte';

And then importing as previously recommended works:
import { SuperDebug } from 'sveltekit-superforms';

Maybe this line just needs to be uncommented for the fix release?

Note there is still a Typescript error: Module '"sveltekit-superforms"' has no exported member 'SuperDebug'. Did you mean to use 'import SuperDebug from "sveltekit-superforms"' instead? ts, so that needs to be updated as well.

[ciscoheat]

It's a Svelte 4/5 compatibility issue, so a rune file cannot be imported in a js/ts file as it will break Svelte 4, it must be done in package.json.

[magick93]

I'm not sure if what I'm facing is exactly the same. Although its definitely related to SuperDebug.

I'm using Svelte 5 in both my ui package and app that uses ui as a dependency.

In the browser I see:

Unknown file extension ".svelte" for /home/anton/git/yestech/freedom/node_modules/.pnpm/sveltekit-superforms@2.26.1_@sveltejs+kit@2.21.5_@sveltejs+vite-plugin-svelte@4.0.4_sve_dc2ac54f41849849f3c6dfc056480111/node_modules/sveltekit-superforms/dist/client/SuperDebug.svelte

And in the terminal I see:

[vite] (ssr) Error when evaluating SSR module /src/routes/+page.svelte: Unknown file extension ".svelte" for /home/anton/git/yestech/freedom/node_modules/.pnpm/sveltekit-superforms@2.26.1_@sveltejs+kit@2.21.5_@sveltejs+vite-plugin-svelte@4.0.4_sve_dc2ac54f41849849f3c6dfc056480111/node_modules/sveltekit-superforms/dist/client/SuperDebug.svelte
      at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:176:9)
      at defaultGetFormat (node:internal/modules/esm/get_format:219:36)
      at defaultLoad (node:internal/modules/esm/load:143:22)
      at async ModuleLoader.load (node:internal/modules/esm/loader:541:7)
      at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:422:45)
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for /home/anton/git/yestech/freedom/node_modules/.pnpm/sveltekit-superforms@2.26.1_@sveltejs+kit@2.21.5_@sveltejs+vite-plugin-svelte@4.0.4_sve_dc2ac54f41849849f3c6dfc056480111/node_modules/sveltekit-superforms/dist/client/SuperDebug.svelte
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:176:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:219:36)
    at defaultLoad (node:internal/modules/esm/load:143:22)
    at async ModuleLoader.load (node:internal/modules/esm/loader:541:7)
    at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:422:45) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

[magick93]

Possibly related too. When running storybook I'm now getting:

=> Failed to build the preview
Error: Missing "./adapter" specifier in "sveltekit-superforms" package
    at e (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/vite@5.4.19_@types+node@24.0.1_sass@1.89.1/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46042:25)
    at n (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/vite@5.4.19_@types+node@24.0.1_sass@1.89.1/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46042:627)
    at o (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/vite@5.4.19_@types+node@24.0.1_sass@1.89.1/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46042:1297)
    at resolveExportsOrImports (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/vite@5.4.19_@types+node@24.0.1_sass@1.89.1/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46663:18)
    at resolveDeepImport (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/vite@5.4.19_@types+node@24.0.1_sass@1.89.1/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46686:25)
    at tryNodeResolve (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/vite@5.4.19_@types+node@24.0.1_sass@1.89.1/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46451:16)
    at ResolveIdContext.resolveId (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/vite@5.4.19_@types+node@24.0.1_sass@1.89.1/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46201:19)
    at PluginContainer.resolveId (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/vite@5.4.19_@types+node@24.0.1_sass@1.89.1/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:49018:17)
    at async file:///home/anton/git/yestech/freedom/node_modules/.pnpm/vite@5.4.19_@types+node@24.0.1_sass@1.89.1/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:66525:15
    at async file:///home/anton/git/yestech/freedom/node_modules/.pnpm/vite@5.4.19_@types+node@24.0.1_sass@1.89.1/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:49933:14

[ciscoheat]

See if it works now with 2.27.0

// Rune version
import SuperDebug from 'sveltekit-superforms/SuperDebug.svelte';

[magick93]

I've tried upgrading to 2.27.0 but still get:

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.
9:32:14 am [vite] (client) Re-optimizing dependencies because lockfile has changed

  VITE v6.3.5  ready in 2173 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
9:33:00 am [vite-plugin-svelte] src/routes/+page.svelte:43:1 Unused CSS selector "h1"
https://svelte.dev/e/css_unused_selector
9:33:07 am [vite-plugin-svelte] /home/anton/git/yestech/freedom/packages/ui/dist/components/auction/EnglishAuction.svelte:28:25 This reference only captures the initial value of `currentBid`. Did you mean to reference it inside a derived instead?
https://svelte.dev/e/state_referenced_locally
9:33:42 am [vite-plugin-svelte] /home/anton/git/yestech/freedom/packages/ui/dist/components/frontpage/Homepage.svelte:270:14 '#' is not a valid href attribute
https://svelte.dev/e/a11y_invalid_attribute
9:33:42 am [vite-plugin-svelte] /home/anton/git/yestech/freedom/packages/ui/dist/components/frontpage/Homepage.svelte:355:22 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
https://svelte.dev/e/element_invalid_self_closing_tag
9:33:42 am [vite-plugin-svelte] /home/anton/git/yestech/freedom/packages/ui/dist/components/frontpage/Homepage.svelte:359:22 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
https://svelte.dev/e/element_invalid_self_closing_tag
9:33:42 am [vite-plugin-svelte] /home/anton/git/yestech/freedom/packages/ui/dist/components/frontpage/Homepage.svelte:366:22 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
https://svelte.dev/e/element_invalid_self_closing_tag
9:33:42 am [vite-plugin-svelte] /home/anton/git/yestech/freedom/packages/ui/dist/components/frontpage/Homepage.svelte:370:22 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
https://svelte.dev/e/element_invalid_self_closing_tag
9:33:42 am [vite-plugin-svelte] /home/anton/git/yestech/freedom/packages/ui/dist/components/frontpage/Homepage.svelte:375:22 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
https://svelte.dev/e/element_invalid_self_closing_tag
9:33:42 am [vite-plugin-svelte] /home/anton/git/yestech/freedom/packages/ui/dist/components/frontpage/Homepage.svelte:379:22 Self-closing HTML tags for non-void elements are ambiguous — use `<div ...></div>` rather than `<div ... />`
https://svelte.dev/e/element_invalid_self_closing_tag
9:33:42 am [vite] (ssr) Error when evaluating SSR module /src/routes/+page.svelte: Unknown file extension ".svelte" for /home/anton/git/yestech/freedom/node_modules/.pnpm/sveltekit-superforms@2.27.0_@sveltejs+kit@2.21.5_@sveltejs+vite-plugin-svelte@4.0.4_sve_7ed8b6559f30e37c68ba5c2149e27d68/node_modules/sveltekit-superforms/dist/client/SuperDebug.svelte
      at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:176:9)
      at defaultGetFormat (node:internal/modules/esm/get_format:219:36)
      at defaultLoad (node:internal/modules/esm/load:143:22)
      at async ModuleLoader.load (node:internal/modules/esm/loader:541:7)
      at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:422:45)
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for /home/anton/git/yestech/freedom/node_modules/.pnpm/sveltekit-superforms@2.27.0_@sveltejs+kit@2.21.5_@sveltejs+vite-plugin-svelte@4.0.4_sve_7ed8b6559f30e37c68ba5c2149e27d68/node_modules/sveltekit-superforms/dist/client/SuperDebug.svelte
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:176:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:219:36)
    at defaultLoad (node:internal/modules/esm/load:143:22)
    at async ModuleLoader.load (node:internal/modules/esm/loader:541:7)
    at async ModuleLoader.moduleProvider (node:internal/modules/esm/loader:422:45) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

And when doing pnpm storybook I get the following:

=> Failed to build the preview
Error: Missing "./adapter" specifier in "sveltekit-superforms" package
    at e (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/vite@5.4.19_@types+node@24.0.1_sass@1.89.1/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46042:25)
    at n (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/vite@5.4.19_@types+node@24.0.1_sass@1.89.1/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46042:627)
    at o (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/vite@5.4.19_@types+node@24.0.1_sass@1.89.1/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46042:1297)
    at resolveExportsOrImports (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/vite@5.4.19_@types+node@24.0.1_sass@1.89.1/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46663:18)
    at resolveDeepImport (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/vite@5.4.19_@types+node@24.0.1_sass@1.89.1/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46686:25)
    at tryNodeResolve (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/vite@5.4.19_@types+node@24.0.1_sass@1.89.1/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46451:16)
    at ResolveIdContext.resolveId (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/vite@5.4.19_@types+node@24.0.1_sass@1.89.1/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46201:19)
    at PluginContainer.resolveId (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/vite@5.4.19_@types+node@24.0.1_sass@1.89.1/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:49018:17)
    at async file:///home/anton/git/yestech/freedom/node_modules/.pnpm/vite@5.4.19_@types+node@24.0.1_sass@1.89.1/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:66525:15
    at async file:///home/anton/git/yestech/freedom/node_modules/.pnpm/vite@5.4.19_@types+node@24.0.1_sass@1.89.1/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:49933:14

[ciscoheat]

@magick93 try to reproduce it with on one of the projects here: https://superforms.rocks/examples