Error: Function called outside component initialization in SvelteKit with Zod validator

[romelperez]

Describe the bug

In a custom component when using createForm from the felte package, in SvelteKit, there is this error which breaks the application.

Error: Function called outside component initialization
    at get_current_component (/Users/romelperez/projects/landup/landup-app/node_modules/svelte/internal/index.js:987:15)
    at Object.onDestroy (/Users/romelperez/projects/landup/landup-app/node_modules/svelte/internal/index.js:1029:5)
    at Proxy.createForm (/Users/romelperez/projects/landup/landup-app/node_modules/felte/dist/cjs/index.cjs:40:12)

I saw this issue https://github.com/pablo-abc/felte/issues/31 but we are not using it outside of Svelte nor with other packages, only local environment with SvelteKit and the mentioned packages.

Which package/s are you using?

felte (Svelte), @felte/validator-zod

Environment

• OS: Mac OS M1
• Browser: Google Chrome 107
• Versions:

"dependencies": {
  "@felte/validator-zod": "^1.0.12",
  "felte": "^1.2.6",
  "zod": "^3.19.1",
  "@sveltejs/kit": "1.0.0-next.555",
  "svelte": "^3.53.1",
  "svelte-check": "^2.9.2",
  "svelte-preprocess": "^4.10.7"
}

To reproduce

<script lang="ts">
  import { createForm } from 'felte';
  import { validator } from '@felte/validator-zod';
  import * as zod from 'zod';

  const formSchema = zod.object({
    firstName: zod.string().min(1).max(250),
    lastName: zod.string().min(1).max(250)
  });

  const { form, errors } = createForm({
    extend: validator({ schema: formSchema })
  });
</script>

<form use:form>
  <input name="firstName" />
  <input name="lastName" />
  <button type="submit">Submit</button>
</form>

Small reproduction example

No response

Screenshots

No response

Additional context

Thank you for your work!

[winston0410]

I am having this issue as well, have you solved this @romelperez ?

[romelperez]

@winston0410 , I couldn't work around it so I had to use another solution. Still waiting for a response about this here.

[winston0410]

@romelperez I have been using app/environment to resolve this, but it is definitely not optimal.

<script lang="ts" context="module">
import { browser } from '$app/environment';
</script>
                    {#if browser}
                        <-- a component contains all logic  of felte -->
                        <ProductForm />
                    {/if}

I hope this can be fixed, because I think felte is the most feature rich form library out there.

Btw I wonder which solution are you using now?

[romelperez]

@winston0410 , we created our own solution with a pretty close API to that of Felte, but with just a few features, so if Felte is usable again, we can switch to it.

[pablo-abc]

I apologise. I've written in other places that my life has been a bit chaotic the past few months (moved to a new country recently). I am catching up now!

I just tried Felte in a fresh SvelteKit project with TypeScript and I can't reproduce this at all. Everything is working as expected.

This is my package.json:

{
	"name": "felte-201",
	"version": "0.0.1",
	"private": true,
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"preview": "vite preview",
		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
		"lint": "prettier --plugin-search-dir . --check .",
		"format": "prettier --plugin-search-dir . --write ."
	},
	"devDependencies": {
		"@sveltejs/adapter-auto": "^1.0.0",
		"@sveltejs/kit": "^1.0.0",
		"prettier": "^2.8.0",
		"prettier-plugin-svelte": "^2.8.1",
		"svelte": "^3.54.0",
		"svelte-check": "^2.9.2",
		"tslib": "^2.4.1",
		"typescript": "^4.9.3",
		"vite": "^4.0.0"
	},
	"type": "module",
	"dependencies": {
		"@felte/validator-zod": "^1.0.12",
		"felte": "^1.2.6",
		"zod": "^3.20.2"
	}
}

Could it have been caused by a specific version of SvelteKit/Svelte? That seems to be the only difference between our setup.

[winston0410]

@pablo-abc no worries! Thank you for your great work with this library! I will try an make a reproducible example for you later today

[winston0410]

I tried to reproduce this issue, commented out everything unrelated and make sure version are correct, but still with no luck, I think I will need some input from you @romelperez to reproduce the issue . My attempt is over here https://github.com/winston0410/felte-repo

I got this error when I work with a SvelteKit application in a monorepo(Nx repo), were you using a monorepo as well?

[winston0410]

Ok I am able to reproduce this, and I think this is not an issue from felte but monorepo, but I have no idea why only felte has the issue, and the solution.

https://github.com/winston0410/felte-repo/tree/9a00ea259e62b2c1be86436cf0f20908fff179ba

[romelperez]

In our case, we are using a root folder SvelteKit application. If we have time, we will try to reproduce this again, since we moved to another solution, but I like this library too.

[winston0410]

@romelperez somehow I just got an idea and I have solved the issue by guess this morning. I am using Vite and this is needed in the config for felte to work:

import type { UserConfig } from 'vite'

const config: UserConfig = {
	ssr: {
		format: "esm",
		noExternal: ["felte"]
	}
};

export default config;

If you are using vite, this should solve your issue as well!

[fnimick]

I can confirm the above fix also resolves the problem I was having with crashes in SSR, in my case I was using a monorepo with lerna.