Issue with building forms in Astro Qwik integration (@qwikdev/astro)

Question

I'm stucked at this part https://qwik.dev/docs/integrations/modular-forms/#final-form as I am not supposed to install qwik city when I'm using Astro Qwik integration (@qwikdev/astro)? So, I decided to utilize useSignal instead of the routeLoader$. However, I'm still faced with the invalid module @qwik-city-plan. I wonder if it's because https://modularforms.dev/qwik/api/useForm is using qwik city ?

I'm getting this error:

TypeError
An error occurred.
Invalid module "@qwik-city-plan" is not a valid package name imported from C:\\Users\\User\\Desktop\\folder\\[email protected][email protected]\\[email protected]\\qwik-city\\index.qwik.mj

TypeError \[ERR_INVALID_MODULE_SPECIFIER\]: Invalid module "@qwik-city-plan" is not a valid package name imported from C:\\Users\\User\\Desktop\\folder\\[email protected][email protected]\\[email protected]\\qwik-city\\index.qwik.mjs
at new NodeError (node:internal/errors:405:5)
at parsePackageName (node:internal/modules/esm/resolve:818:11)
at packageResolve (node:internal/modules/esm/resolve:841:5)
at moduleResolve (node:internal/modules/esm/resolve:939:20)
at defaultResolve (node:internal/modules/esm/resolve:1132:11)
at nextResolve (node:internal/modules/esm/loader:163:28)
at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
at ModuleWrap.\<anonymous\> (node:internal/modules/esm/module_job:77:40)
at link (node:internal/modules/esm/module_job:76:36)

This is my code:

import { $, component$, type QRL, useSignal } from "@builder.io/qwik";
import {
email,
type Input,
minLength,
object,
string,
picklist,
} from "valibot";
import type { InitialValues, SubmitHandler } from "@modular-forms/qwik";
import { formAction$, useForm, valiForm$ } from "@modular-forms/qwik";

const roles = \["customer", "vendor"\] as const;

const insertUsersSchema = object({
name: string(\[minLength(1, "Name is required")\]),
email: string(\[
minLength(1, "Email is required"),
email("Invalid email address"),
\]),
password: string(\[
minLength(1, "Password is required"),
minLength(6, "Password must be at least 6 characters"),
\]),
role: picklist(roles, "Role is required"),
});

type RegisterForm = Input\<typeof insertUsersSchema\>;

const InitialValues: InitialValues\<RegisterForm\> = {
name: "",
email: "",
password: "",
role: "customer",
};

export const useFormAction = formAction$\<RegisterForm\>((values) =\> {
console.log(values);
}, valiForm$(insertUsersSchema));

export const RegisterForm = component$(() =\> {
const \[form, { Form, Field, FieldArray }\] = useForm\<RegisterForm\>({
loader: useSignal(InitialValues),
action: useFormAction(),
validate: valiForm$(insertUsersSchema),
});

const handleSubmit: QRL\<SubmitHandler\<RegisterForm\>\> = $((values, e) =\> {
e.preventDefault();
console.log(values);
});

return (
\<Form onSubmit$={handleSubmit}\>
\<Field name="name"\>
{(props) =\> {
return (
\<div\>
\<input {...props} type="text" value={props.value} /\>
{props.error && \<div\>{props.error}\</div\>}
\</div\>
);
}}
\</Field\>
\<Field name="email"\>
{(props) =\> {
return (
\<div\>
\<input {...props} type="email" value={props.value} /\>
{props.error && \<div\>{props.error}\</div\>}
\</div\>
);
}}
\</Field\>
\<Field name="password"\>
{(props) =\> {
return (
\<div\>
\<input {...props} type="password" value={props.value} /\>
{props.error && \<div\>{props.error}\</div\>}
\</div\>
);
}}
\</Field\>
\<Field name="role"\>
{(props) =\> {
return (
\<div\>
\<input {...props} type="text" value={props.value} /\>
{props.error && \<div\>{props.error}\</div\>}
\</div\>
);
}}
\</Field\>

      <button type="submit">Register</button>
    </Form>

);
});