Getting an weird error in production which is not happening in localhost

[DB-db-dron]

Summary

Context:

• Happening in not-found.js page
• not-found.js contains a form
• error occurring when the form getting submitted
• I am using form Action and useFormState hook

Note: the error is not happening in localhost

The below image shows what is happening when the form is submitted

FormAction function

export async function createMaintenanceQuery(prevState, formData) {
  if (
    !formData.get("firstname") ||
    !formData.get("lastname") ||
    !formData.get("email") ||
    !formData.get("message")
  ) {
    console.log(formData);
    return {
      type: "error",
      message: "Please fill all the required fields.",
    };
  }
  try {
    // save form content to database
    return {
      type: "success",
      message: "Successfully submitted your message.",
    };
  } catch (err) {
    console.log(err);
    return {
      type: "error",
      message: "Something went wrong. Please try again.",
    };
  }  
}

Form code

// logic related to the form in the pag
  const [state, formAction] = useFormState(
    createMaintenanceQuery,
    initialState
  );
  const formRef = useRef();
  useEffect(() => {
    if (state.type == "success") {
      formRef.current?.reset();
    }
  }, [state]);


<form
          ref={formRef}
          action={async (formData) => {
            await formAction(formData);
          }}
          className={styles.main_form}
        >
          <div className={styles.main_form_row}>
            <div className={styles.main_form_group}>
              <label htmlFor="firstname">
                First name <span className="requiredstar">*</span>
              </label>
              <input
                type="text"
                name="firstname"
                id="firstname"
                placeholder="First name"
                autoComplete="off"
                required
              />
            </div>
            <div className={styles.main_form_group}>
              <label htmlFor="lastname">
                Last name <span className="requiredstar">*</span>
              </label>
              <input
                type="text"
                name="lastname"
                id="lastname"
                placeholder="Last name"
                autoComplete="off"
                required
              />
            </div>
          </div>
          <div className={styles.main_form_row}>
            <div className={styles.main_form_group}>
              <label htmlFor="email">
                Email <span className="requiredstar">*</span>
              </label>
              <input
                type="email"
                name="email"
                id="email"
                placeholder="you@company.com"
                autoComplete="off"
                required
              />
            </div>
            <div className={styles.main_form_group}>
              <label htmlFor="lastname">Phone number</label>
              <div className={styles.main_form_group_tel}>
                <select name="countrycode" id="countrycode">
                  <option value="+1">+1 (US)</option>
                  <option value="+993">+993 (TM)</option>
                  <option value="+994">+994 (AZ)</option>
                  <option value="+995">+995 (GE)</option>
                  <option value="+996">+996 (KG)</option>
                  <option value="+998">+998 (UZ)</option>
                </select>

                <input
                  type="tel"
                  name="phone"
                  id="phone"
                  placeholder="Phone number"
                  autoComplete="off"
                />
              </div>
            </div>
          </div>
          <div className={styles.main_form_textarea}>
            <label htmlFor="message">
              How can we help? <span className="requiredstar">*</span>
            </label>
            <textarea
              name="message"
              id="message"
              rows={10}
              placeholder="Your company needs"
              required
            ></textarea>
          </div>
          {state.message && (
            <p
              className={`${styles.main_form_submitmessage} ${
                state.type == "success"
                  ? styles.main_form_submitmessage_success
                  : styles.main_form_submitmessage_error
              }`}
            >
              {state.message}
            </p>
          )}
          <div className={styles.main_form_bottom}>
            <p>
              By submitting this, I confirm that I have read and understood the{" "}
              <Link href={"/legal/privacy-policy"}>Privacy Policy</Link>. (
              <span className="requiredstar">*</span>) fields are required.
            </p>
            <SubmitButton />
          </div>
        </form>

If more information is needed please ask.

Additional information

No response

Example

No response

[icyJoseph]

Are you using the use server directive?

Also, could you change this part:

          action={async (formData) => {
            await formAction(formData);
          }}

to

          action={formAction}

[riturajcodes]

The problem you are facing is due to static rendering of not-found.js.

Next.js thinks your page doesn't need to fetch or upload data if you don't use a dynamic function. This means it shows the same page to everyone, and any outgoing request can't be run because the page is delivered as static HTML from a CDN or edge server.

So, to solve this issue:

// app/not-found.js
import {headers} from "next/headers";

export default async function NotFound() {
    // sweet trick make the page into dynamic rendering
    const headersList = headers()
    return (
        <Custom404 />
    )
}

Put your logic of the 404 page inside a Custom404 component.
Mark the Custom404 page as "use client".

Hope it resolves your issue.

[DB-db-dron]

This works for me

[DB-db-dron]

but useFormState is a hook which I used. So, it should be client-side component by default