JSONSchema using schemasafe adaptor failing runtime in SPA mode

[h7kanna]

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

Description
Schemasafe adapter throwing runtime error

sveltekit-superforms….js?v=e66d4914:2613 Uncaught (in promise) TypeError: validator is not a function
    at cachedValidator (sveltekit-superforms…?v=e66d4914:2613:30)
    at async Object.validate (sveltekit-superforms…?v=e66d4914:2626:25)
    at async Form_validate (sveltekit-superforms…?v=0dbc1997:2868:16)
    at async Form_clientValidation (sveltekit-superforms…?v=0dbc1997:2948:20)

App is created by following the documentation at https://superforms.rocks/concepts/spa#without-a-pagets-file

SvelteLab sample
https://www.sveltelab.dev/?provider=github&owner=h7kanna&repo=superforms-schemasafe

[ciscoheat]

This is working for me when I submit (without constraints, to see the JSON Schema error messages), how to reproduce it?

[h7kanna]

This is working for me when I submit (without constraints, to see the JSON Schema error messages), how to reproduce it?

[ciscoheat]

Can you link to a saved version on SvelteLab, otherwise I cannot see what has been modified?

[h7kanna]

Hi, I am not sure what it means by saved version.
I did create a new svelte app and opening it on the SvelteLab.

In the SvelteLab link above you need to go to /jsonschema route and fill the form and on submit it throws error in the browser console.

Source for the page for the usage here https://github.com/h7kanna/superforms-schemasafe/blob/main/src/routes/jsonschema/%2Bpage.svelte

Note : I was not able replicate it exactly using the project template so created a sample sveltekit app

I am able to open it in the SvelteLab
https://www.sveltelab.dev/?provider=github&owner=h7kanna&repo=superforms-schemasafe

[ciscoheat]

You need to login at SvelteLab and save it, so it gets a shorter url.

[h7kanna]

Oh got it
https://www.sveltelab.dev/oy34n9iqfn0bnx5

[ciscoheat]

I'll take a look and see what can be done for the next release.

[ciscoheat]

This project works locally for me, but not in SvelteLab, so it needs further investigation. Does it work for you locally (Node, VS Code)?

[h7kanna]

Hi, It does not work in local.

Verified in

OS: macOS 15.0.1
Platform: Darwin OS arm64
Browsers:

• Chrome Version 130.0.6723.59 (Official Build) (arm64)
• Firefox 131.0.3 (aarch64)

Node: v20.17.0

Console:

sveltekit-superforms_adapters.js?v=56fe33c9:2613 Uncaught (in promise) TypeError: validator is not a function
    at cachedValidator (sveltekit-superforms_adapters.js?v=56fe33c9:2613:30)
    at async Object.validate (sveltekit-superforms_adapters.js?v=56fe33c9:2626:25)
    at async Form_validate (sveltekit-superforms.js?v=56fe33c9:2868:16)
    at async Form_clientValidation (sveltekit-superforms.js?v=56fe33c9:2948:20)
cachedValidator @ sveltekit-superforms_adapters.js?v=56fe33c9:2613
await in cachedValidator
(anonymous) @ sveltekit-superforms.js?v=56fe33c9:3135
setTimeout
NextChange_setHtmlEvent @ sveltekit-superforms.js?v=56fe33c9:3134
Tainted_update @ sveltekit-superforms.js?v=56fe33c9:3264
set @ sveltekit-superforms.js?v=56fe33c9:2839
input1_input_handler @ +page.svelte:36
Show 5 more frames
Show lessUnderstand this errorAI
sveltekit-superforms_adapters.js?v=56fe33c9:2613 Uncaught (in promise) TypeError: validator is not a function
    at cachedValidator (sveltekit-superforms_adapters.js?v=56fe33c9:2613:30)
    at async Object.validate (sveltekit-superforms_adapters.js?v=56fe33c9:2626:25)
    at async Form_validate (sveltekit-superforms.js?v=56fe33c9:2868:16)
    at async Form_clientValidation (sveltekit-superforms.js?v=56fe33c9:2948:20)
cachedValidator @ sveltekit-superforms_adapters.js?v=56fe33c9:2613
await in cachedValidator
onBlur @ sveltekit-superforms.js?v=56fe33c9:3448
Show 2 more frames
Show lessUnderstand this errorAI

[paradoxe]

@ciscoheat did you check the /jsonschema route on the provided example ? Otherwise I made another project without the input constraints here: https://www.sveltelab.dev/x2esljhbjk8tb7k
I suspect the issue is related to the dynamic module import of the schemasafe library in HMR mode...

[gosongying]

Hello, is there any update on this issue? I'm encountering it as well.

[ciscoheat]

I suspect the issue is related to the dynamic module import of the schemasafe library in HMR mode...

Any ideas why this is the case? It works with other adapters without any problems. It's strange that it works for me locally (in HMR mode).

[LickABrick]

Hi, I have the same issue (comparable setup to @h7kanna) is there any workaround to get around this? I don't have any constraints configured (as I don't need them yet).

[ciscoheat]

The workaround is not to use the adapter client-side, as it seems to work fine on the server. I cannot reproduce it locally, so it's hard to know what goes wrong (when building, most likely).

[LickABrick]

Ah that's a shame. I actually am using Tauri and it allows the user to define forms using a JSON file which is read from the local file system, this JSON file is also used to create the schema for the form as the form is dynamic. So in my case I don't really have a backend.

Is there any other way I create a schema dynamically based on user input (if you want me to create a seperate issue let me know)?

[paradoxe]

Superform is excellent for fullstack Typescript Sveltkit apps. However, when it comes to SPA with OpenAPI schema, like in my case with a Python backend. I ended up using HeyApi for generating Typescript types and schema objects, that I use apply browser builtin validations on the client. The form submissions are handled with Pydantic on the backend. I hope this helps...

[ciscoheat]

If one of you can reproduce it locally with one of the Sveltelab environments referenced earlier, I'm happy to take a look at it.

[LickABrick]

From https://www.sveltelab.dev/x2esljhbjk8tb7k I've done: Project > Download > Unzip > Open in VSCode > npm install > npm run dev > open in browser > press Submit > Get error:

When I open the sveltelabs in the browser I also get the error without changing anything. I use nodejs 23.2

[ciscoheat]

Try to tell Vite to pre-bundle the validator library when building, something like:

vite.config.ts

import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [sveltekit()],
  optimizeDeps: {
    include: ["@exodus/schemasafe"],
  },
});

[LickABrick]

@ciscoheat thanks this seems to fix it!

[ciscoheat]

Great! I'll add it to the documentation for the schemasafe adapter.