error when build or trying a preview build

[RBleyenberg]

Following your qwik repo comment here some more code.

in dev mode the login works but when building with npm build or preview we get the following

the trace looks like;

---

Oops! Something went wrong! :(

ESLint: 8.36.0

TypeError: Cannot read properties of undefined (reading 'name')
Occurred while linting C:\Users\Bleyenberg\IdeaProjects\dare-qwik-2\src\routes\auth\login\index.tsx:56
Rule: "qwik/valid-lexical-scope"
at JSXAttribute (C:\Users\Bleyenberg\IdeaProjects\dare-qwik-2\node_modules\eslint-plugin-qwik\index.js:7:1553)
at ruleErrorHandler (C:\Users\Bleyenberg\IdeaProjects\dare-qwik-2\node_modules\eslint\lib\linter\linter.js:1118:28)
at C:\Users\Bleyenberg\IdeaProjects\dare-qwik-2\node_modules\eslint\lib\linter\safe-emitter.js:45:58
at Array.forEach ()
at Object.emit (C:\Users\Bleyenberg\IdeaProjects\dare-qwik-2\node_modules\eslint\lib\linter\safe-emitter.js:45:38)
at NodeEventGenerator.applySelector (C:\Users\Bleyenberg\IdeaProjects\dare-qwik-2\node_modules\eslint\lib\linter\node-event-generator.js:297:26)
at NodeEventGenerator.applySelectors (C:\Users\Bleyenberg\IdeaProjects\dare-qwik-2\node_modules\eslint\lib\linter\node-event-generator.js:326:22)
at NodeEventGenerator.enterNode (C:\Users\Bleyenberg\IdeaProjects\dare-qwik-2\node_modules\eslint\lib\linter\node-event-generator.js:340:14)
at CodePathAnalyzer.enterNode (C:\Users\Bleyenberg\IdeaProjects\dare-qwik-2\node_modules\eslint\lib\linter\code-path-analysis\code-path-analyzer.js:795:23)
at C:\Users\Bleyenberg\IdeaProjects\dare-qwik-2\node_modules\eslint\lib\linter\linter.js:1153:32

---

I've pretty must followed your guide to get a look and feel of your api abd ended up with the following code snippet;

export const loginFormLoader = routeLoader$<InitialValues<LoginForm>>(() => ({
    email: 'twiligt@sprakle.com',
    password: 'ponies',
}));

export const loginFormActionServerSide = formAction$<LoginForm>((values) => {

}, zodForm$(loginSchema));

export const Login = component$(() => {

    const navigate = useNavigate();
    const loadingIndicator = useStore({ loading: false });
    const serverError = useSignal(false)

    const [loginForm, { Form, Field }] = useForm<LoginForm>({
        loader: loginFormLoader(),
        action: loginFormActionServerSide(),
        validate: zodForm$(loginSchema),
    });

    const loginSubmit: SubmitHandler<LoginForm> = $((values) => {
        LoginApi(values).then((success) => {
            if (success) {
                navigate('/dashboard');
            } else {
                console.log('Login failed');
                serverError.value = true;
                setTimeout(() => {
                    serverError.value = false;
                }, 2500);
            }
        }).catch((error) => {
            console.error(error);
        });;
    });

    return (
        <div class="min-h-screen bg-base-200 flex items-center">
            <div class="card mx-auto w-full max-w-5xl  shadow-xl">
                <div class="grid  md:grid-cols-2 grid-cols-1  bg-base-100 rounded-xl">
                    <div class=''>
                        <LoginIntro />
                    </div>
                    <div class='py-24 px-10'>
                        <h2 class='text-2xl font-semibold mb-2 text-center'>Login</h2>
                        <Form id="login-form" onSubmit$={loginSubmit}>
                            <div class="flex flex-col mb-4 space-y-6">
                                <Field name="email">
                                    {(field, props) => (
                                        <TextInput
                                            {...props}
                                            value={field.value}
                                            error={field.error}
                                            type="email"
                                            label="Email"
                                            required
                                        />
                                    )}
                                </Field>
                                <Field name="password">
                                    {(field, props) => (
                                        <TextInput
                                            {...props}
                                            value={field.value}
                                            error={field.error}
                                            type="password"
                                            label="Password"
                                            required
                                        />
                                    )}
                                </Field>
                            </div>
                            <div class='text-right text-primary'>
                                <Link href="/forgot-password">
                                    <span class="text-sm  inline-block  hover:text-primary hover:underline hover:cursor-pointer transition duration-200">Forgot Password?</span>
                                </Link>
                                <button type="submit" class={"btn mt-2 w-full btn-primary" + (loadingIndicator.loading ? " loading" : "")}>Login</button>
                                <div class='text-center mt-4'>
                                    Don't have an account yet?
                                    <Link href="/register">
                                        <span class="  inline-block  hover:text-primary hover:underline hover:cursor-pointer transition duration-200">
                                            Register
                                        </span>
                                    </Link>
                                </div>
                            </div>
                        </Form>
                    </div>
                </div>
            </div>
            <div class="toast toast-top toast-end z-50 mt-16 mr-5 toast-overide-animation" style={{ display: serverError.value ? '' : 'none' }}>
                <div class="alert alert-error">
                    <div>
                        <span>email or password is wrong !!!</span>
                    </div>
                </div>
            </div>
        </div>
    );

});

export default component$(() => {
    return (
        <Login />
    );
});

export const head: DocumentHead = {
    title: 'login page'
};

Hope it helps.

[fabian-hiller]

What happens in line 56 in routes\auth\login\index.tsx? Your problem is an ESLint rule that tries to protect you from bugs. So it is not necessarily a bug in Qwik or Modular Forms.

[RBleyenberg]

Ah,

Makes sense the errors the index.ts is just a export const with basic axios for the api call but i do import constants as AUTH_TOKEN, API_ENDPOINT ect ect

all considered valid-lexical-scope so i just disabled it with a rule 'qwik/valid-lexical-scope': 'off' in the lintrc file for the moment
also i changed the default config of a rule '@typescript-eslint/consistent-type-imports': 'warn', from error to warn.

the last part is because your code/guide has unused vars

const [**unused**, { Form, Field }] = useForm<CountryForm>({ loader: countryFormLoader(), action: countryFormActionServerSide(), validate: zodForm$(countrySchema), });

After that it all works ^^

Thanks for your input

[fabian-hiller]

With array destructuring you don't have to write unused variables:

const [, { Form, Field }] = useForm<Values>();