qwik v2 - the lib does not work with latest beta releast (2.0.0-beta.13)

[Relecto]

Hi!
I am working on an app using qwik v2 now, and I can't get this library to work.
I was using modular forms at first, which seems to work with beta.11, but doesn't work with beta.13.

So I decided to try this one out and it doesn't seem to work with either beta.13 or beta.11.

How to reproduce

Create a new qwik v2 app

pnpm create qwik@2.0.0-beta.13

Complete installation steps as described in the docs

pnpm add valibot
pnpm add @formisch/qwik

Create a new route and paste the example code to index.tsx from the docs

import { Field, Form, useForm$ } from '@formisch/qwik';
import { component$ } from '@qwik.dev/core';
import * as v from 'valibot';

const LoginSchema = v.object({
  email: v.pipe(v.string(), v.email()),
  password: v.pipe(v.string(), v.minLength(8)),
});

export default component$(() => {
  const loginForm = useForm$({
    schema: LoginSchema,
  });

  return (
    <Form of={loginForm} onSubmit$={(output) => console.log(output)}>
      <Field
        of={loginForm}
        path={['email']}
        render$={(field) => (
          <div>
            <input {...field.props} value={field.input.value} type="email" />
            {field.errors.value && <div>{field.errors.value[0]}</div>}
          </div>
        )}
      />
      <Field
        of={loginForm}
        path={['password']}
        render$={(field) => (
          <div>
            <input {...field.props} value={field.input.value} type="password" />
            {field.errors.value && <div>{field.errors.value[0]}</div>}
          </div>
        )}
      />
      <button type="submit">Login</button>
    </Form>
  );
});

Run the app with pnpm run dev and navigate to the route.

> my-qwik-empty-starter@ dev /home/ryuu/codebase/qwik/formisch-issue
> vite --mode ssr

11:49:40 AM [vite] (client) Re-optimizing dependencies because lockfile has changed

  VITE v7.1.11   ssr   ready in 1618 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
QWIK ERROR Code(Q10) https://github.com/QwikDev/qwik/blob/main/packages/qwik/src/core/error/error.ts#L18 Error: Code(Q10) https://github.com/QwikDev/qwik/blob/main/packages/qwik/src/core/error/error.ts#L18
    at createAndLogError (file:///home/ryuu/codebase/qwik/formisch-issue/node_modules/.pnpm/@qwik.dev+core@2.0.0-beta.13_prettier@3.6.2_vite@7.1.11_@types+node@24.3.0_less@4.4.2_s_80a053c2e6be24e848756794f334e637/node_modules/@qwik.dev/core/dist/core.prod.mjs:53:54)
    at logErrorAndStop (file:///home/ryuu/codebase/qwik/formisch-issue/node_modules/.pnpm/@qwik.dev+core@2.0.0-beta.13_prettier@3.6.2_vite@7.1.11_@types+node@24.3.0_less@4.4.2_s_80a053c2e6be24e848756794f334e637/node_modules/@qwik.dev/core/dist/core.prod.mjs:40:57)
    at qError (file:///home/ryuu/codebase/qwik/formisch-issue/node_modules/.pnpm/@qwik.dev+core@2.0.0-beta.13_prettier@3.6.2_vite@7.1.11_@types+node@24.3.0_less@4.4.2_s_80a053c2e6be24e848756794f334e637/node_modules/@qwik.dev/core/dist/core.prod.mjs:81:12)
    at useInvokeContext (file:///home/ryuu/codebase/qwik/formisch-issue/node_modules/.pnpm/@qwik.dev+core@2.0.0-beta.13_prettier@3.6.2_vite@7.1.11_@types+node@24.3.0_less@4.4.2_s_80a053c2e6be24e848756794f334e637/node_modules/@qwik.dev/core/dist/core.prod.mjs:2178:15)
    at useSequentialScope (file:///home/ryuu/codebase/qwik/formisch-issue/node_modules/.pnpm/@qwik.dev+core@2.0.0-beta.13_prettier@3.6.2_vite@7.1.11_@types+node@24.3.0_less@4.4.2_s_80a053c2e6be24e848756794f334e637/node_modules/@qwik.dev/core/dist/core.prod.mjs:2302:18)
    at useConstant (file:///home/ryuu/codebase/qwik/formisch-issue/node_modules/.pnpm/@qwik.dev+core@2.0.0-beta.13_prettier@3.6.2_vite@7.1.11_@types+node@24.3.0_less@4.4.2_s_80a053c2e6be24e848756794f334e637/node_modules/@qwik.dev/core/dist/core.prod.mjs:7189:24)
    at useSignal (file:///home/ryuu/codebase/qwik/formisch-issue/node_modules/.pnpm/@qwik.dev+core@2.0.0-beta.13_prettier@3.6.2_vite@7.1.11_@types+node@24.3.0_less@4.4.2_s_80a053c2e6be24e848756794f334e637/node_modules/@qwik.dev/core/dist/core.prod.mjs:7183:35)
    at useResolvedQrl (file:///home/ryuu/codebase/qwik/formisch-issue/node_modules/.pnpm/@formisch+qwik@0.6.1_@qwik.dev+core@2.0.0-beta.13_prettier@3.6.2_vite@7.1.11_@types+nod_74722851c147fe09d9de23c64d633457/node_modules/@formisch/qwik/dist/index.qwik.js:887:16)
    at useFormQrl (file:///home/ryuu/codebase/qwik/formisch-issue/node_modules/.pnpm/@formisch+qwik@0.6.1_@qwik.dev+core@2.0.0-beta.13_prettier@3.6.2_vite@7.1.11_@types+nod_74722851c147fe09d9de23c64d633457/node_modules/@formisch/qwik/dist/index.qwik.js:899:17)
    at AsyncFunction.forms_component_7MFM0rWoop8 [as resolved] (/home/ryuu/codebase/qwik/formisch-issue/src/routes/forms/index.tsx:80:59)
Error: Code(Q10) https://github.com/QwikDev/qwik/blob/main/packages/qwik/src/core/error/error.ts#L18
    at createAndLogError (file:///home/ryuu/codebase/qwik/formisch-issue/node_modules/.pnpm/@qwik.dev+core@2.0.0-beta.13_prettier@3.6.2_vite@7.1.11_@types+node@24.3.0_less@4.4.2_s_80a053c2e6be24e848756794f334e637/node_modules/@qwik.dev/core/dist/core.prod.mjs:53:54)
    at logErrorAndStop (file:///home/ryuu/codebase/qwik/formisch-issue/node_modules/.pnpm/@qwik.dev+core@2.0.0-beta.13_prettier@3.6.2_vite@7.1.11_@types+node@24.3.0_less@4.4.2_s_80a053c2e6be24e848756794f334e637/node_modules/@qwik.dev/core/dist/core.prod.mjs:40:57)
    at qError (file:///home/ryuu/codebase/qwik/formisch-issue/node_modules/.pnpm/@qwik.dev+core@2.0.0-beta.13_prettier@3.6.2_vite@7.1.11_@types+node@24.3.0_less@4.4.2_s_80a053c2e6be24e848756794f334e637/node_modules/@qwik.dev/core/dist/core.prod.mjs:81:12)
    at useInvokeContext (file:///home/ryuu/codebase/qwik/formisch-issue/node_modules/.pnpm/@qwik.dev+core@2.0.0-beta.13_prettier@3.6.2_vite@7.1.11_@types+node@24.3.0_less@4.4.2_s_80a053c2e6be24e848756794f334e637/node_modules/@qwik.dev/core/dist/core.prod.mjs:2178:15)
    at useSequentialScope (file:///home/ryuu/codebase/qwik/formisch-issue/node_modules/.pnpm/@qwik.dev+core@2.0.0-beta.13_prettier@3.6.2_vite@7.1.11_@types+node@24.3.0_less@4.4.2_s_80a053c2e6be24e848756794f334e637/node_modules/@qwik.dev/core/dist/core.prod.mjs:2302:18)
    at useConstant (file:///home/ryuu/codebase/qwik/formisch-issue/node_modules/.pnpm/@qwik.dev+core@2.0.0-beta.13_prettier@3.6.2_vite@7.1.11_@types+node@24.3.0_less@4.4.2_s_80a053c2e6be24e848756794f334e637/node_modules/@qwik.dev/core/dist/core.prod.mjs:7189:24)
    at useSignal (file:///home/ryuu/codebase/qwik/formisch-issue/node_modules/.pnpm/@qwik.dev+core@2.0.0-beta.13_prettier@3.6.2_vite@7.1.11_@types+node@24.3.0_less@4.4.2_s_80a053c2e6be24e848756794f334e637/node_modules/@qwik.dev/core/dist/core.prod.mjs:7183:35)
    at useResolvedQrl (file:///home/ryuu/codebase/qwik/formisch-issue/node_modules/.pnpm/@formisch+qwik@0.6.1_@qwik.dev+core@2.0.0-beta.13_prettier@3.6.2_vite@7.1.11_@types+nod_74722851c147fe09d9de23c64d633457/node_modules/@formisch/qwik/dist/index.qwik.js:887:16)
    at useFormQrl (file:///home/ryuu/codebase/qwik/formisch-issue/node_modules/.pnpm/@formisch+qwik@0.6.1_@qwik.dev+core@2.0.0-beta.13_prettier@3.6.2_vite@7.1.11_@types+nod_74722851c147fe09d9de23c64d633457/node_modules/@formisch/qwik/dist/index.qwik.js:899:17)
    at AsyncFunction.forms_component_7MFM0rWoop8 [as resolved] (/home/ryuu/codebase/qwik/formisch-issue/src/routes/forms/index.tsx:80:59)
^C ELIFECYCLE  Command failed.

Details

The error message is a bit cryptic, but as far as I can tell it originates from the very beginning of the useForm$ hook .
I'm no expert at qwik internals, but speculating, I think Qwik somehow not realising that useForm hook runs inside a component, so it errors out.

Please let me know if you need any more info/help :)

[fabian-hiller]

Hey, thank you for reporting this. Does it work with beta.9?

[jordanw66]

Hey, thank you for reporting this. Does it work with beta.9?

Loved modular forms for v1 and trying to migrate to v2 so stuck waiting on this issue, I'll help if I can. I created a few blank projects and can confirm that the error appears in beta.9 and forward but not beta.8

[jordanw66]

Alright I figured out the issue, need @formisch/qwik in ssr.noExternal in your vite.config.ts. It works after adding that. They made a change in beta.9 for deps that's why.

Reference: QwikDev/qwik-evolution#318

[fabian-hiller]

Sorry or my late reply and thank you for sharing this. It will help me update our docs to the newest Qwik v2 version! Thank you!

[fabian-hiller]

I reopened it as we should update the docs to make this clear to all users.