Closed as not planned
Description
Which component is affected?
Qwik Runtime
Describe the bug
import { $, component$, QRL } from "@builder.io/qwik";
import {
Input,
Button
} from "flowbite-qwik"
import {
// routeAction$,
routeLoader$,
} from '@builder.io/qwik-city';
import { formAction$, type InitialValues, SubmitHandler, useForm, valiForm$ } from '@modular-forms/qwik'
import * as v from 'valibot';
import { createToken } from "~/lib/auth";
const LoginSchema = v.object({
email: v.pipe(
v.string(),
v.nonEmpty('Please enter your email.'),
v.email('The email address is badly formatted.'),
),
password: v.pipe(
v.string(),
v.nonEmpty('Please enter your password.'),
v.minLength(8, 'Your password must have 8 characters or more.'),
),
});
type LoginForm = v.InferInput<typeof LoginSchema>;
export const useFormLoader = routeLoader$<InitialValues<LoginForm>>(() => ({
email: '',
password: '',
}));
export const useFormAction = formAction$<LoginForm>( async(values, event) => {
const { email, password } = values;
const { request, cookie, platform, redirect } = await event;
if (email === "[email protected]" && password === "Zahra4444") {
await createToken({ request, cookie, platform });
redirect(302, "/cms/dashboard")
}
console.info(email, password)
}, valiForm$(LoginSchema));
export default component$(() => {
const [, { Form, Field }] = useForm<LoginForm>({
loader: useFormLoader(),
action: useFormAction(),
validate: valiForm$(LoginSchema),
})
const handleSubmit: QRL<SubmitHandler<LoginForm>> = $((values) => {
console.info('client side', { ...values })
})
return (
<>
<div>
<h1 class="font-museomoderno text-display-large">LOGIN</h1>
<Form onSubmit$={handleSubmit} class="flex flex-col gap-y-4">
<Field name="email">
{(field, props) => (
<div>
<Input
{...props}
type="email"
id={field.name}
value={field.value}
placeholder="[email protected]"
onInput$={props.onInput$}
/>
{field.error && <div>{field.error}</div>}
</div>
)}
</Field>
<Field name="password">
{(field, props) => (
<div>
<Input
{...props}
type="password"
id={field.name}
value={field.value}
placeholder="x8jnd121r"
onInput$={props.onInput$}
/>
{field.error && <div>{field.error}</div>}
</div>
)}
</Field>
<Button
type="submit"
>
<p>Login</p>
</Button>
</Form>
</div>
</>
);
});Reproduction
qwik qwik-flowbite
Steps to reproduce
No response
System Info
{
"name": "my-qwik-basic-starter",
"description": "Demo app with sample routes",
"engines": {
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
},
"engines-annotation": "Mostly required by sharp which needs a Node-API v9 compatible runtime",
"private": true,
"trustedDependencies": [
"sharp"
],
"trustedDependencies-annotation": "Needed for bun to allow running install scripts",
"type": "module",
"scripts": {
"build": "qwik build",
"build.client": "vite build",
"build.preview": "vite build --ssr src/entry.preview.tsx",
"build.server": "vite build -c adapters/cloudflare-pages/vite.config.ts",
"build.types": "tsc --incremental --noEmit",
"deploy": "npm run build && wrangler pages deploy",
"dev": "vite --mode ssr",
"dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
"fmt": "prettier --write .",
"fmt.check": "prettier --check .",
"lint": "eslint \"src/**/*.ts*\"",
"preview": "npm run build && wrangler pages dev",
"serve": "wrangler pages dev ./dist --compatibility-flags=nodejs_als",
"start": "vite --open --mode ssr",
"cf-typegen": "wrangler types",
"qwik": "qwik"
},
"devDependencies": {
"@builder.io/qwik": "^1.12.0",
"@builder.io/qwik-city": "^1.12.0",
"@cloudflare/workers-types": "^4.20250405.0",
"@modular-forms/qwik": "^0.29.1",
"@tailwindcss/vite": "^4.0.0",
"@types/eslint": "8.56.10",
"@types/node": "20.14.11",
"@typescript-eslint/eslint-plugin": "7.16.1",
"@typescript-eslint/parser": "7.16.1",
"class-variance-authority": "^0.7.0",
"eslint": "8.57.0",
"eslint-plugin-qwik": "^1.12.0",
"flowbite": "^3.1.2",
"flowbite-qwik": "^1.0.4",
"flowbite-qwik-icons": "^0.1.9",
"nx": "^20.7.1",
"prettier": "3.3.3",
"prettier-plugin-tailwindcss": "^0.6.11",
"tailwindcss": "^4.0.0",
"tailwindcss-animate": "^1.0.7",
"typescript": "5.4.5",
"undici": "*",
"vite": "5.3.5",
"vite-tsconfig-paths": "^4.2.1",
"wrangler": "^3.0.0"
},
"dependencies": {
"@tsndr/cloudflare-worker-jwt": "^3.1.4",
"clsx": "^2.1.1",
"tailwind-merge": "^3.1.0",
"valibot": "^1.0.0"
},
"nx": {}
}Additional Information
No response