Runtime Error with 'FormError' Execution in Development Mode using QwikJS v1.2.6 and ModularForms v0.18.1

[devcaeg]

@fabian-hiller First and foremost, I would like to express my gratitude for this fantastic plugin.

I to report an issue that I have encountered with QwikJS. I'm currently using version 0.18.1 of ModularForms and version 1.2.6 of QwikJS.

The problem arises in "development" mode. If I try to execute 'FormError' from ModularForms to return some kind of error from the server (formAction$), it triggers a runtime error.

Below, I will provide a snippet of the code I've been using, as well as a screenshot of the error.

export const useRegister = formAction$<Form>(
  async (values) => {
    throw new FormError<Form>({
      country: 'Test error',
    });
  },
  zodForm$(form),
);

[fabian-hiller]

Does the problem exist when you downgrade to Qwik v1.1.5? Qwik v1.2.X is currently causing problems in general: https://github.com/BuilderIO/qwik/issues/4789

[devcaeg]

Does the problem exist when you downgrade to Qwik v1.1.5? Qwik v1.2.X is currently causing problems in general: BuilderIO/qwik#4789

I have made a modification to the 'index.qwik.mjs' file, specifically to the 'formActionQrl' function. This change involves altering the 'trycatch' block, in such a way that the catch always sets the 'formActionStore' variable, which eliminates the error. I acknowledge that this is not the optimal solution, but it is a provisional measure to avoid delays in the development.

The problem that arises now is that, even though no errors are now presented and the 'formActionStore' variable is properly set with the error messages, etc., the errors are never displayed in the form 'input' and the 'response' is also not set.

I am including an image of the modified function, highlighting the change made.

[fabian-hiller]

Can you check if the problem still occurs in v0.20.0?

[devcaeg]

Can you check if the problem still occurs in v0.20.0?

Hello, excuse my absence.

In the latest version of QwikJS and ModularForms, the same error continues to occur.

[devcaeg]

I would like to know if there is anything I can do to help solve this problem.

[fabian-hiller]

Maybe this is the problem: https://github.com/vitejs/vite/issues/9528

Does the problem still occur when you run your Qwik application via pnpm preview?

[devcaeg]

Maybe this is the problem: vitejs/vite#9528

Does the problem still occur when you run your Qwik application via pnpm preview?

Hello, yes, in preview mode the error also occurs.

ws [FormError]
    at M2 (file:///Users/caeg.dev/Desktop/duenodirecto/workspace/frontend/server/entry.preview.mjs:294:98288)
    at $e (file:///Users/caeg.dev/Desktop/duenodirecto/workspace/frontend/server/entry.preview.mjs:25:5237)
    at file:///Users/caeg.dev/Desktop/duenodirecto/workspace/frontend/server/entry.preview.mjs:30:2751
    at J (file:///Users/caeg.dev/Desktop/duenodirecto/workspace/frontend/server/entry.preview.mjs:24:1509)
    at file:///Users/caeg.dev/Desktop/duenodirecto/workspace/frontend/server/entry.preview.mjs:30:2618
    at g (file:///Users/caeg.dev/Desktop/duenodirecto/workspace/frontend/server/entry.preview.mjs:30:2878)
    at Object.f2 (file:///Users/caeg.dev/Desktop/duenodirecto/workspace/frontend/server/entry.preview.mjs:294:92884)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.g (file:///Users/caeg.dev/Desktop/duenodirecto/workspace/frontend/server/entry.preview.mjs:30:2855)
    at async file:///Users/caeg.dev/Desktop/duenodirecto/workspace/frontend/server/entry.preview.mjs:16:533 {
  errors: { mobilePhoneNumber: 'Test error.' }
}

[devcaeg]

For what it's worth, this is my "formAction$" that I use to test the error.

export const useAction = formAction$<Register>(() => {
  throw new FormError<Register>({
    mobilePhoneNumber: 'Test error.',
  });
}, zodForm$(register));

[devcaeg]

I just realized that if instead of doing a "throw" you do a "return" the error disappears and everything seems to work correctly.

I used "throw" because the documentation says so.

export const useAction = formAction$<Register>(() => {
  return new FormError<Register>({
    mobilePhoneNumber: 'Test error.',
  });
}, zodForm$(register));

[fabian-hiller]

This is strange. Since formAction$ uses try/catch, throw should work. I will check this as soon as I find time.