Astro Qwik集成构建表单时遭遇@qwik-city-plan无效模块错误

你的判断完全正确：@modular-forms/qwik的formAction$及依赖它的useForm配置确实绑定了Qwik City，而Astro + Qwik集成场景下不需要也不应该安装Qwik City，这就是你遇到@qwik-city-plan模块找不到错误的原因——这个包是Qwik City的内部依赖，不会单独发布安装。

核心问题点 #

formAction$是Qwik City专属的服务端动作API，导入它会间接引入Qwik City的内部模块，你没装Qwik City自然会报错。另外useForm的loader参数原本是配合Qwik City的routeLoader$使用的，纯前端场景用useSignal替代并不符合API设计逻辑。

修改后的可行代码 #

改用纯客户端表单方案，彻底移除Qwik City相关依赖：

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

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 RegisterForm = component$(() => {
  // 调整useForm配置：去掉action和loader，直接传initialValues和客户端验证
  const [form, { Form, Field }] = useForm<RegisterForm>({
    initialValues,
    validate: valiForm$(insertUsersSchema),
  });

  const handleSubmit: QRL<SubmitHandler<RegisterForm>> = $((values, e) => {
    e.preventDefault();
    // 这里写你的客户端提交逻辑，比如调用fetch发送请求到后端
    console.log("表单提交值：", values);
  });

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

      <button type="submit">Register</button>
    </Form>
  );
});

关键改动说明 #

1. 移除formAction$：彻底切断对Qwik City的依赖，这个API仅适用于Qwik City项目
2. 简化useForm配置：用initialValues直接初始化表单，替代原本服务端导向的loader参数
3. 保留客户端验证：valiForm$依然可以正常工作，实现前端实时表单校验
4. 客户端提交逻辑：在handleSubmit中直接处理表单提交，比如通过fetch发送数据到后端接口

这样修改后，就不会再触发Qwik City相关的模块导入错误，完全适配Astro + Qwik的集成场景。

内容的提问来源于stack exchange，提问作者Chi Hao