Failed to fetch RSC payload

[jd-carroll]

Note: This is likely a configuration issue of my own making, but I am struggling to pin-point where I have gone wrong.

Anecdotally (cannot say for certain), it feels as though ever since I started using next-intl with domain specific routing I started getting errors which look like:

Failed to fetch RSC payload for https://localho.st:5020/sign-up/family. Falling back to browser navigation. TypeError: Failed to fetch
    at fetchServerResponse (webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/components/router-reducer/fetch-server-response.js:57:27)
    at eval (webpack-internal:///(app-pages-browser)/../../node_modules/next/dist/client/components/router-reducer/prefetch-cache-utils.js:136:106)

Notably, it is inconsistent. First, it is happening primary when I run next dev locally, but we are in such active development I have not been able to spend enough time with the deployed site to guarantee it is not happening there.

Second, it seems like it is only happening on the first request... So from the example above, any consecutive requests to
https://localho.st:5020/sign-up/family typically work.

Configuration

My middleware configuration looks like:

{
  localePrefix: 'never',
  locales: ['en-US'],
  defaultLocale: 'en-US',
  domains: [
    {
      domain: 'localho.st',
      defaultLocale: 'en-US',
      locales: ['en-US']
    }
  ]
}

The matcher config in my middleware.ts file looks like:

export const config = {
  // Match only internationalized pathnames
  matcher: [
    {
      source: '/((?!v1|_next|_vercel|static).*)'
    }
  ]
};

App router

We are using the app router on [email protected] and the NextLink looks like:

const Links = {
  SignUp: {
    Family: '/sign-up/family'
  }
};

export function SignUpPlans() {
  return (
    {/* Other Plans */}
    <SignUpPlanCard key={"family"} signUpPage={Links.SignUp.Family} />
  )
}

export function SignUpPlanCard({ signUpPage }) {
  return (
    <NextLink href={signUpPage}>
      {/* Plan details */}
    </NextLink>
  )
}

My directory structure looks like:

src/
├─ app/
│  ├─ [locale]/
│  │  ├─ sign-up/
│  │  │  ├─ (marketing)/
│  │  │  │  ├─ plans/
│  │  │  │  │  ├─ page.tsx
│  │  │  ├─ (flow)/
│  │  │  │  ├─ family/
│  │  │  │  │  ├─ page.tsx

Questions

1. What am I doing wrong? I don't think I should be using link structures that look like /[locale]/sign-up/family (where the locale is replaced with correct value.
2. Has anyone else seen this? I'm wondering if there is just a compile time problem when Next initially compiles the page

I do see the incoming request from next and it compiles successfully:

 GET /sign-up/plans?_rsc=wj9m3 200 in 107ms
 ○ Compiling /[locale]/sign-up/family ...
 ✓ Compiled /[locale]/sign-up/family in 1611ms (5065 modules)
 ⚠ Fast Refresh had to perform a full reload when (app-pages-browser)/../../node_modules/@sentry/core/build/esm/api.js changed. Read more: https://nextjs.org/docs/messages/fast-refresh-reload
 GET /sign-up/plans 200 in 322ms
 GET /sign-up/family?_rsc=e13fl 200 in 48ms

[amannn]

I've unfortunately not seen this issue so far … In case you can provide a public repository and reproduction steps, I'd be happy to have a look!