sveltekit-superforms
sveltekit-superforms copied to clipboard
ciscoheat
`SuperDebug` import broken on Svelte 4 (was: Svelte 5 in enforced runes mode)
- [x] 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
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"
}
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.
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.
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/[email protected]_@[email protected]_@[email protected]_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/[email protected]_@[email protected]_@[email protected]_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/[email protected]_@[email protected]_@[email protected]_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'
}
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/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46042:25)
at n (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46042:627)
at o (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46042:1297)
at resolveExportsOrImports (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46663:18)
at resolveDeepImport (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46686:25)
at tryNodeResolve (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46451:16)
at ResolveIdContext.resolveId (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46201:19)
at PluginContainer.resolveId (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:49018:17)
at async file:///home/anton/git/yestech/freedom/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:66525:15
at async file:///home/anton/git/yestech/freedom/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:49933:14
See if it works now with 2.27.0
// Rune version
import SuperDebug from 'sveltekit-superforms/SuperDebug.svelte';
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/[email protected]_@[email protected]_@[email protected]_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/[email protected]_@[email protected]_@[email protected]_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/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46042:25)
at n (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46042:627)
at o (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46042:1297)
at resolveExportsOrImports (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46663:18)
at resolveDeepImport (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46686:25)
at tryNodeResolve (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46451:16)
at ResolveIdContext.resolveId (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:46201:19)
at PluginContainer.resolveId (file:///home/anton/git/yestech/freedom/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:49018:17)
at async file:///home/anton/git/yestech/freedom/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:66525:15
at async file:///home/anton/git/yestech/freedom/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-C6uTJdX2.js:49933:14
@magick93 try to reproduce it with on one of the projects here: https://superforms.rocks/examples
@ciscoheat - please see https://github.com/magick93/sf_debug
I've added the zod example to a turbo repo example.
Hi @ciscoheat - were you able to reproduce the issue with the example I provided?
Hi, sorry, had no time for that yet, I hope this weekend will be more sane.
It works on normal repos, so you have to check the turbo repo if there's some configuration required for library components. For example, it works when added directly to the apps/web package.
does export new sub module work? (my idea)
currently lib/index.js import old SuperDebug
We add another lib/runes/index.ts that export almost same things
A rune version is exported like this now:
import SuperDebug from 'sveltekit-superforms/SuperDebug.svelte';
https://superforms.rocks/super-debug
A rune version is exported like this now:
import SuperDebug from 'sveltekit-superforms/SuperDebug.svelte'; https://superforms.rocks/super-debug
The import statement also import SuperDebug, so it will not work in runes mode
import { superForm } from 'sveltekit-superforms';
Step to reproduce (you can see, I even not import SuperDebug)
- npx sv create test
- cd test
- yarn add sveltekit-superforms
- vim src/routes/+page.svelte add
<script lang="ts">
import 'sveltekit-superforms';
</script>
- yarn dev => access ok
- vim svelte.config.js
- add
compilerOptions: {
runes: true
}
- yarn dev =>
✘ [ERROR] node_modules/sveltekit-superforms/dist/client/SuperDebug.svelte:21:1 Cannot use `export let` in runes mode — use `$props()` instead
https://svelte.dev/e/legacy_export_invalid [plugin vite-plugin-svelte:optimize]
node_modules/sveltekit-superforms/dist/client/SuperDebug.svelte:21:1:
21 │ export let data;
╵ ^
The plugin "vite-plugin-svelte:optimize" was triggered by this import
node_modules/sveltekit-superforms/dist/index.js:1:23:
1 │ import SuperDebug from './client/SuperDebug.svelte';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/home/tulequ/test/node_modules/esbuild/lib/main.js:1467
let error = new Error(text);
^
Error: Build failed with 1 error:
node_modules/sveltekit-superforms/dist/client/SuperDebug.svelte:21:1: ERROR: [plugin: vite-plugin-svelte:optimize] node_modules/sveltekit-superforms/dist/client/SuperDebug.svelte:21:1 Cannot use `export let` in runes mode — use `$props()` instead
https://svelte.dev/e/legacy_export_invalid
at failureErrorWithLog (/home/tulequ/test/node_modules/esbuild/lib/main.js:1467:15)
at /home/tulequ/test/node_modules/esbuild/lib/main.js:926:25
at /home/tulequ/test/node_modules/esbuild/lib/main.js:1345:9
at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
errors: [Getter/Setter],
warnings: [Getter/Setter]
}
@ciscoheat I'm now also experiencing the issue @magick93 reported:
This code:
import { superForm } from 'sveltekit-superforms';
...causes the error:
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for /project/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_svelte@5._pntf6jocmli75poexsmxnrozmu/node_modules/sveltekit-superforms/dist/client/SuperDebug.svelte
As you can see, I'm not even importing SuperDebug.
Same as @gyenabubakar , I'm not even importing it and it fails anyways
Using svelte 5.39.5 and @sveltejs/kit 2.43.2
I guess I'll stick with regular sveltekit forms for now
I'm not sure this will fix it, but adding <svelte:options runes={false} /> to the top of the component seems to have removed some errors at least in 2.28.0. The export may still be required though, feedback is appreciated.
I'm not sure this will fix it, but adding
<svelte:options runes={false} />to the top of the component seems to have removed some errors at least in 2.28.0. The export may still be required though, feedback is appreciated.
This fix in 2.28.0 now breaks Svelte 4 projects.
We get an error of:
unknow attribute 'runes'
slete:options runes={false}
The pulgin "vite-plugin-svelte:optimze-svelte" was trigger by this import
node_modules/sveltekit-superfomrs/dist/index.js:1:23:
import SuperDebug from './client/SuperDebug.svelte'
I'm not sure this will fix it, but adding
<svelte:options runes={false} />to the top of the component seems to have removed some errors at least in 2.28.0. The export may still be required though, feedback is appreciated.
I think you should release a new v3 release that only use svelte 5 rune mode only, that make everything simple
There is already a v3 version underway, with much more changes than this.
Unfortunately it's not possible to make everyone happy here:
- If we remove the default
SuperDebugexport, all sites using SuperDebug break. Nobody's happy. - If we add
<svelte:options runes={false} />to SuperDebug, Svelte 4 breaks, which is bad, but Svelte 5 is one year old now and fully backwards-compatible, so it may not be that bad. - If we revert the options fix introduced in 2.28.0, enforced runes mode won't work.
Svelte 5+ is the future, so here's my suggestion for Svelte 4, add a preprocess plugin that strips out the runes option:
svelte.config.js
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/**
* Preprocessor to strip <svelte:options runes={false} /> from SuperDebug.svelte
* for Svelte 4 compatibility (Svelte 4 cannot parse the runes attribute).
*/
function stripRunesOptions() {
return {
name: 'strip-runes-options',
markup({ content, filename }) {
// Only process SuperDebug.svelte (not SuperDebugRuned.svelte)
if (filename && filename.includes('SuperDebug.svelte') && !filename.includes('SuperDebugRuned.svelte')) {
// Remove <svelte:options runes={false} /> and any surrounding whitespace
const cleaned = content.replace(/<svelte:options\s+runes\s*=\s*\{?\s*false\s*\}?\s*\/>\s*/g, '');
if (cleaned !== content) {
return { code: cleaned };
}
}
}
};
}
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
// for more information about preprocessors
preprocess: [stripRunesOptions(), vitePreprocess()],
kit: {
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
adapter: adapter()
}
};
export default config;
I have been trying to get this to work for over 5+ hours and I thought I was doing something wrong since I was new to superforms. I was about to go insane.
What am I able to role back to until this is fixed? Thanks. 👍
P.S. I'm using whatever is right out of the box with npx sv create (kit 2.48.5, svelte 5.43.8, sveltekit-superforms 2.28.1). I've created the project multiple times. I'd create a repl, but they start you with such an outdated config, I didn't want to take the time to update it.
I spent a lot longer on this than 5 hours, and eventually gave up and removed superforms. Its not really needed now that Sveltekit has remote functions.