useSearchParams() should be wrapped in a suspense boundary at page "/update-prompt"

[avoirsolutions]

I get the following Error when building the solution (it works in DEV): >>>
useSearchParams() should be wrapped in a suspense boundary at page "/update-prompt". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout
Error occurred prerendering page "/update-prompt". Read more: https://nextjs.org/docs/messages/prerender-error
<<<

The documentation mentions this behavior appears when we use useSearchParams hook in a statically rendered page/route. If we want to keep this page static rendered then it says to use Suspense boundary but I cannot get any solutions to build so far.

Has anyone managed to get this to work please without disabling the rule (you can disable it by setting the missingSuspenseWithCSRBailout option to false in your next.config.js)?

I am using Next.js version 14.1.0 and React 18.

Thanks

[Felipe-dot]

Hello, I have the same error. And I fixed it, disabling this rule in the nextConfig file.

module.exports = {
experimental: {
missingSuspenseWithCSRBailout: false,
},
}

Is not the best approach. But it resolved it for me. I don`t know where i need to wrap the suspense tag, so i hope can anyone help

[kk-1590]

Just simply wrap the component where useSearchParams is being used in a Suspense component, here is the code -

"use client";
import { useEffect, useState,Suspense } from "react";
import { useSession } from "next-auth/react";
import { useRouter, useSearchParams } from "next/navigation";
import Form from "@components/Form";

const UpdatePrompt = () => {
  const router = useRouter();

  const { data: session } = useSession();

  const [submitting, setSubmitting] = useState(false);

  const searchParams =  useSearchParams();

  const promptId = searchParams.get("id");

  const [post, setPost] = useState({
    prompt: "",
    tag: "",
  });

  useEffect(() => {
    const getPromptDetails = async () => {
        const response = await fetch(`/api/prompt/${promptId}`)
        const data =  await response.json();

        setPost(
            {
                prompt : data.prompt,
                tag: data.tag,
            }
        )
    }
    if(promptId){
        getPromptDetails();
    }
  },[promptId]);

  const updatePrompt = async (e) => {
    e.preventDefault();
    setSubmitting(true);

    if(!promptId){
        return alert("Prompt ID  not found!");
    }

    try {
      const response = await fetch(`/api/prompt/${promptId}`, {
        method: "PATCH",
        body: JSON.stringify({
          prompt: post.prompt,
          tag: post.tag,
        }),
      });

      if (response.ok) {
        router.push("/");
      }
    } catch (error) {
      console.log(error);
    } finally {
      setSubmitting(false);
    }
  };
  

  return (
      <Form
        type="Edit"
        post={post}
        setPost={setPost}
        submitting={submitting}
        handleSubmit={updatePrompt}
      ></Form>
  );
};

const EditPrompt = () => {
    return <Suspense>
        <UpdatePrompt />
    </Suspense>
}

export default EditPrompt;

For more info : https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

[snade-dev]

Je suivais exactement le même tuto ça matche
merci