Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Search params are undefined when draft mode is enabled #67554

Open
MangoMarcus opened this issue Jul 8, 2024 · 2 comments
Open

Search params are undefined when draft mode is enabled #67554

MangoMarcus opened this issue Jul 8, 2024 · 2 comments
Labels
bug Issue was opened via the bug report template. Output (export/standalone) Related to the the output option in `next.config.js`. Runtime Related to Node.js or Edge Runtime with Next.js.

Comments

@MangoMarcus
Copy link

MangoMarcus commented Jul 8, 2024

Link to the code that reproduces this issue

https://github.com/MangoMarcus/nextjs-draft-mode-empty-search-params

To Reproduce

  1. Clone the repository and spin up locally with npm i and npm run dev
  2. Use the two buttons at the top to toggle draft mode on and off
  3. The 'token' parameter shows 'undefined' when draft mode is off, and 'foo' when it's on
  4. Deploy to Vercel, or use mine: https://nextjs-draft-mode-empty-search-params.vercel.app/?token=foo
  5. Use the buttons again - the 'token' parameter shows 'undefined' when draft mode is off, but also 'undefined' when it's on

Current vs. Expected behavior

Locally the token correctly displays as 'foo' with draft mode enabled, but on Vercel it's 'undefined'. Vercel should also show 'foo'.

Interestingly there's also a discrepancy between urlPathname and isRevalidate between local and vercel shown in the screenshots below

Local - dev mode (npm run dev)

Draft mode disabled
Screenshot 2024-07-08 at 12 33 28

Draft mode enabled
Screenshot 2024-07-08 at 12 33 23

Local - production build (npm run build && npm start)

Draft mode disabled
Disabled

Draft mode enabled
Enabled

Vercel

Draft mode disabled
Screenshot 2024-07-08 at 12 34 49

Draft mode enabled
Screenshot 2024-07-08 at 13 01 36

Provide environment information

Operating System:
  Platform: macOS
  Chip: Apple M1 Pro
  Version: macOS 14.4
Binaries:
  Node: 20.2.0
  npm: 9.6.6
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.2.4
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Output (export/standalone), Runtime

Which stage(s) are affected? (Select all that apply)

Vercel (Deployed)

Additional context

The problem might stem from the search parameter being accessed dynamically, depending on if draft mode is enabled.

If draft mode is enabled then the page is rendered dynamically and dynamic features like search parameters and cookies should be available. If it's disabled, then it's rendered statically and all search parameters should returned undefined.

My example shows that draft mode is correctly enabled - and therefore the page is being rendered dynamically at request time - but the dynamic features are not available.

Edit: Added local production build examples

@MangoMarcus MangoMarcus added the bug Issue was opened via the bug report template. label Jul 8, 2024
@github-actions github-actions bot added Output (export/standalone) Related to the the output option in `next.config.js`. Runtime Related to Node.js or Edge Runtime with Next.js. labels Jul 8, 2024
@MangoMarcus
Copy link
Author

As an aside, how actively are these issues monitored? I've submitted 2 bugs months ago which have yet to be acknowledged by a maintainer

@MangoMarcus
Copy link
Author

Edited to add an example of a production build run locally which also works as expected, which confirms a discrepancy between a production app built and run locally vs on Vercel

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. Output (export/standalone) Related to the the output option in `next.config.js`. Runtime Related to Node.js or Edge Runtime with Next.js.
Projects
None yet
Development

No branches or pull requests

1 participant