Error occured in Server Component render when redirect (next/navigation) is used

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:14:54 PDT 2022; root:xnu-8792.41.9~2/RELEASE_X86_64
Binaries:
  Node: 18.12.0
  npm: 8.19.2
  Yarn: 1.22.19
  pnpm: 7.15.0
Relevant packages:
  next: 13.0.3
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Firefox 106.0.5, macOS Ventura 13.0.1

How are you deploying your application? (if relevant)

Locally with next start

Describe the Bug

When redirect is used in a Server Component, in the production build there is a mysterious error, although the redirection itself works fine:

An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.

Furthermore, when the root has a loading.tsx, the following error will also be shown (well, not that exact error, but a minified error with a URL leading to this decoded text):

This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual way to fix this is to wrap the original update in startTransition.

Expected Behavior

No errors.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/joulev/debug/tree/nextjs-redirect-error

To Reproduce

Clone the repository
npm install
npm run build (the bug doesn’t appear in dev mode)
npm run start
Navigate to localhost:3000 with the console open
It will automatically redirect to /test (of course), but in the console the above error message appears.

To reproduce the second error

Do steps 1–2 above.
Add a file app/loading.tsx (not available in the repro repo above) with the following content
```
export default function Loading() {
  return <div>Loading</div>;
}
```
Repeat steps 3–6 above.

Issue Analytics

State:
Created 10 months ago
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

balazsorban44commented, Nov 14, 2022

Seems to be a different issue, the link you provided works fine for me. Could you open a separate issue with a linked minimal reproduction of your code? Just remove anything unnecessary so it’s easier to debug/verify. 🙏

For the original report, I did some digging and it is a duplicate of https://github.com/vercel/next.js/issues/42556. Basically, you can ignore the console in this case, we will make sure it’s not shown as an error.

1reaction

kochiecommented, Nov 13, 2022

I’m also getting the same error when used in a client component.

'use client'
import { load, trackPageview } from 'fathom-client'
import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'

export default function Fathom() {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  useEffect(() => {
    load('XXXXXXXX', {
      includedDomains: ['example.com'],
      spa: 'auto',
    })

    // Initialize Fathom when the app loads
    // Example: yourdomain.com
    //  - Do not include https://
    //  - This must be an exact match of your domain.
    //  - If you're using www. for your domain, make sure you include that here.
    trackPageview()

    // Record a pageview when route changes
  }, [pathname, searchParams])

  return null
}