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

Technical Questions
1

I’m stucked at this part Modular Forms | Integrations 📚 Qwik Documentation as I am not supposed to install qwik city when I’m using Astro Qwik integration (@qwikdev/astro)?

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\node_modules\.pnpm\@builder.io+qwik-city@1.5.1\node_modules\@builder.io\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\node_modules\.pnpm\@builder.io+qwik-city@1.5.1\node_modules\@builder.io\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>
  );
});
2

Hello @Chi_Hao

Thank you for reaching out to the Builder.io Forum with your question about Qwik! Unfortunately, this support channel is only intended for questions about the use of the Builder.io Visual Editor and its related plans and pricing.

However, Our Open source development team would love to help you take advantage of Qwik and Partytown to boost your site performance scores further and provide more value to your implementation with Builder.

To reach out to the Partytown and Qwik open source project teams, please head over to our Discord and join the discussion there. For the best results, we’d recommend you make a copy of your implementation of Partytown and place it in a Stackblitz project for review, then share it with the #general-partytown channel.

I hope you find the information above helpful and please don’t hesitate to reach out to us if you need any further assistance.