router.refresh() throws in specific Draft Mode conditions

[angeloashmore]

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.6.0: Mon Dec 19 20:43:09 PST 2022; root:xnu-8020.240.18~2/RELEASE_ARM64_T6000
Binaries:
  Node: 18.12.1
  npm: 8.19.2
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 13.4.5-canary.7
  eslint-config-next: 13.4.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/angeloashmore/next.js-issue-50935

To Reproduce

Start the development server before continuing.

npm run dev

With Draft Mode disabled

1. Go to /foo. The page should perform a client-side refresh every 1 second with no errors.

With Draft Mode enabled

1. Go to /draft. You should be redirect to /foo, now with Draft mode enabled.

2. The page should perform a full browser refresh every 1 second with errors in the console.

   🐛 It is supposed to perform a client-side refresh every 1 second.

To disable Draft Mode

1. Go to /end-draft.

Describe the Bug

router.refresh() throws a server error and forces a full browser refresh under the following circumstances:

• In development (i.e. the dev server).
• In a dynamc route.
• In a statically rendered route using generateStaticParams().
• While Draft Mode is enabled.

The following output prints to the server console when router.refresh() is called. The browser performs a full refresh rather than a client-side refresh.

- error Error: invariant: Expected pageData to be a string for app data request but received undefined. This is a bug in Next.js.
    at DevServer.renderToResponseWithComponentsImpl (/[REDACTED]/nextjs-tutorial-app-router/node_modules/next/dist/server/base-server.js:1261:27)
    at async DevServer.renderPageComponent (/[REDACTED]/nextjs-tutorial-app-router/node_modules/next/dist/server/base-server.js:1320:24)
    at async DevServer.renderToResponseImpl (/[REDACTED]/nextjs-tutorial-app-router/node_modules/next/dist/server/base-server.js:1351:32)
    at async DevServer.pipeImpl (/[REDACTED]/nextjs-tutorial-app-router/node_modules/next/dist/server/base-server.js:634:25)
    at async Object.fn (/[REDACTED]/nextjs-tutorial-app-router/node_modules/next/dist/server/next-server.js:1142:21)
    at async Router.execute (/[REDACTED]/nextjs-tutorial-app-router/node_modules/next/dist/server/router.js:315:32)
    at async DevServer.runImpl (/[REDACTED]/nextjs-tutorial-app-router/node_modules/next/dist/server/base-server.js:608:29)
    at async DevServer.run (/[REDACTED]/nextjs-tutorial-app-router/node_modules/next/dist/server/dev/next-dev-server.js:922:20)
    at async DevServer.handleRequestImpl (/[REDACTED]/nextjs-tutorial-app-router/node_modules/next/dist/server/base-server.js:539:20)
{
  digest: undefined
}

Expected Behavior

The page performs a client-side refresh. No errors are logged to the server console.

Which browser are you using? (if relevant)

Chrome 113.0.5672.126

How are you deploying your application? (if relevant)

N/A

[angeloashmore]

Fixed in #50941 (available in v13.4.5-canary.9).

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.