question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dynamic `href` prints console warning in development mode

See original GitHub issue

Bug report

Describe the bug

When using the new support (v9.5.3) for dynamic href (ie, <Link href="/pages/1"> when referring to pages/[id].js, a warning is printed to the console:

Unknown key passed via urlObject into url.format: searchParams

To Reproduce

Here’s a minimal repro: https://github.com/ztanner/next-dynamic-link-bug – run yarn dev and observe the console on the index page.

Expected behavior

No warnings should be printed

Screenshots

Dropping a debugger in the validator: CleanShot 2020-09-02 at 11 23 19@2x

Additional context

The validation is coming from this section: https://github.com/vercel/next.js/blob/canary/packages/next/next-server/lib/router/router.ts#L566-L573 which implies searchParams is potentially valid URL option, and shouldn’t be a warning?

Happy to jump on a solution to this - just want to verify that either searchParams is valid, or alternatively it can be plucked out before being sent to the validator.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:7
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

7reactions
balazsorban44commented, Sep 17, 2020

@styxlab I just checked, it is fixed on next@9.5.4-canary.2. Either upgrade to canary, or wait until it gets to stable 9.5.4

2reactions
yunyongcommented, Sep 26, 2020

You can use it without warning like this : <Link href="/pages/[id]" as="/pages/1">

as is the path that will be rendered in the browser URL bar.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Debugging Dynamic Links - Firebase
Your project has not configured Dynamic Links​​ To start using Dynamic Links, you must enable it for your project in the Firebase console....
Read more >
Avoid `print` calls in production code. (Documentation)
To remove the warning from the whole project. Open analysis_options.yaml file and add this linter rule: include: package:flutter_lints/flutter.
Read more >
How To Use the JavaScript Developer Console - DigitalOcean
Within the Console, you can type and execute JavaScript code. Start with an alert that prints out the string Hello, World! : alert("Hello, ......
Read more >
Debugging methods and error types - HubSpot Developers
You can enable debug mode on a live page by loading the page with a ?hsDebug=true query string in the URL. Please note ......
Read more >
The 10 Most Common JavaScript Issues Developers Face
Some of the following, for example, have been known to be troublesome for many a JavaScript developer: // All of these evaluate to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found