T
TanStack•7mo ago
fascinating-indigo

Prerendering error

I'm currently encountering an error when trying to build my application. My application is nextJS version 15 using app router: The error I'm getting: 
Error occurred prerendering page "/test2". Read more: https://nextjs.org/docs/messages/prerender-error
Error: redacted
    at C:\Users\Desktop\Projects\Mint\mint-hjemmeside\.next\server\chunks\793.js:1:30664
Export encountered an error on /test2/page: /test2, exiting the build.
 ⨯ Next.js build worker exited with code: 1 and signal: null
Error occurred prerendering page "/test2". Read more: https://nextjs.org/docs/messages/prerender-error
Error: redacted
    at C:\Users\Desktop\Projects\Mint\mint-hjemmeside\.next\server\chunks\793.js:1:30664
Export encountered an error on /test2/page: /test2, exiting the build.
 ⨯ Next.js build worker exited with code: 1 and signal: null
My code: 
export default async function page() {
    prefetch(trpc.post.hello.queryOptions({ text: "Hello" }));

    return (
        <div>
            <HydrateClient>
                <ErrorBoundary fallback={<div>Something went wrong</div>}>
                    <Suspense fallback={<div>Loading...</div>}>
                        <div>Hello!</div>
                    </Suspense>
                </ErrorBoundary>
            </HydrateClient>
        </div>
    );
}
export default async function page() {
    prefetch(trpc.post.hello.queryOptions({ text: "Hello" }));

    return (
        <div>
            <HydrateClient>
                <ErrorBoundary fallback={<div>Something went wrong</div>}>
                    <Suspense fallback={<div>Loading...</div>}>
                        <div>Hello!</div>
                    </Suspense>
                </ErrorBoundary>
            </HydrateClient>
        </div>
    );
}
I saw that juliusmarminge might have gotten a similar error, but I'm not sure. Its a while ago. https://github.com/TanStack/query/pull/8383#issuecomment-2593409074 Here he commented, that adding export const dynamic = "force-dynamic" fixed the error - It also fixed it for me. If it's the same error that I'm encountering, has there then a better solution, so I don't have to tell each file to be dynamic?
GitHub
fix: no hydration when new promise comes in by juliusmarminge · Pu...
1 Reply
fascinating-indigo
fascinating-indigoOP•7mo ago
I think I found the solution, and it was the same error. In my query client factory (the file that creates a QueryClient instance), I hadn't disabled error redaction on dehydration. It was as simple as adding the following, which I found on the docs: 
dehydrate: {
  ...
  shouldRedactErrors: (error) => {
      // We should not catch Next.js server errors
      // as that's how Next.js detects dynamic pages
      // so we cannot redact them.
      // Next.js also automatically redacts errors for us
      // with better digests.
      return false;
  }
}
dehydrate: {
  ...
  shouldRedactErrors: (error) => {
      // We should not catch Next.js server errors
      // as that's how Next.js detects dynamic pages
      // so we cannot redact them.
      // Next.js also automatically redacts errors for us
      // with better digests.
      return false;
  }
}
The reason it wasn't initially disabled was because I was following the new tRPC intergration with React Query. Their documentation doesn't mention that this should be disabled when using Next.js. Would be helpful if there were some kind of info card, informing people about this.

Did you find this page helpful?