SvelteKit SuperForms message always undefined

ghz 7months ago ⋅ 123 views

I am developing a form with Sveltekit, sveltekit-superforms, drizzle, zod schema to be able to perform server-side checks of the form, the problem subsists in the fact that after performing the checks, in trying to send messages back to the client it would appear that the value of message is always undefined, despite the fact that I am sending a message with parameters set, I can't figure out why it doesn't work. Here is the server-side code:

export const load = (async () => {
    return {
        formData: await superValidate(ZodSchema)
    };
}) satisfies PageServerLoad;

export const actions: Actions = {
    submitCheckout: async ({ request }) => {
        // Validate the form
        const formData = await superValidate<typeof ZodSchema, AlertMessageType>(
            request,
            ZodSchema
        );

        // Check if form is valid
        if (formData.valid === false) {
            return message(formData, {
                alertType: 'error',
                alertText: INVALID_FORM_DATA_ERROR
            });
        }

...


        return message(formData, {
            alertType: 'success',
            alertText: SUCCESS_MESSAGE
        });
    }
};

while this is client-side:

const { enhance, form, errors, message } = superForm(data.props.formData, {
        resetForm: true,
        taintedMessage: null,
        validators: ZodSchema,

        onUpdate: () => {
            isProcessing = false;

            if (!$message) return;

            const { alertType, alertText } = $message;
            if (alertType === 'error') {
                toast.error(alertText);
            }
            if (alertType === 'success') {
                toast.success(alertText);
            }
        }
    });

This is the type of the AlertMessage:

export type AlertMessageType = {
    alertType: 'success' | 'error' | 'warning' | 'info';
    alertText: string;
};

Answers

The issue you're encountering might be related to how the message function is implemented and how it returns the message object. From the provided code snippets, it seems that the message function returns an object with alertType and alertText properties. However, it's unclear how this function is implemented and whether it correctly returns the message object.

Here are a few steps you can take to debug and troubleshoot the issue:

  1. Check the message function implementation: Ensure that the message function is correctly implemented and returns an object with the alertType and alertText properties. Verify that it's returning the message object as expected.

  2. Debug the server-side code: Add console.log statements or use a debugger to inspect the value of formData and the message object before returning it from the server-side submitCheckout action. This will help you verify that the message object is being constructed correctly.

  3. Inspect the network request/response: Use browser developer tools to inspect the network request and response when submitting the form. Verify that the server is sending the message object in the response payload and that it's being received correctly on the client-side.

  4. Check for errors in the client-side code: Double-check the client-side code to ensure that there are no errors or typos that could prevent the message object from being properly handled and displayed.

  5. Verify data types: Ensure that the data types of the alertType and alertText properties match the expected types ('success' | 'error' | 'warning' | 'info' for alertType, and string for alertText).

By following these steps, you should be able to identify the root cause of the issue and resolve it accordingly. If you're still experiencing problems, consider providing more details or code examples related to the implementation of the message function and how it's used in your application.

#forms