Next.js: Dynamic `href` prints console warning in development mode

Created on 2 Sep 2020  路  8Comments  路  Source: vercel/next.js

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 <a href="19@2x">19@2x</a>

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.

bug p0

Most helpful comment

@styxlab I just checked, it is fixed on [email protected]. Either upgrade to canary, or wait until it gets to stable 9.5.4

All 8 comments

Also having this issue

Also having this issue. Closed but not fixed?

@styxlab I just checked, it is fixed on [email protected]. Either upgrade to canary, or wait until it gets to stable 9.5.4

I think this can solve your problem, tell me if the solution work

I confirm this is fixed in 9.5.4. I changed mine to "next": "9.5.4-canary.21", in package.json

(edit for search travellers: canary versions contain bugs. beware. also, it updates almost daily. expect quick bugfixes. checkout the latest version here: https://www.npmjs.com/package/next?activeTab=versions )

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.

I confirm this is fixed in 9.5.4. I changed mine to "next": "9.5.4-canary.21", in package.json

@tobyhinloopen can you tell me how to upgrade from '9.5.3' to '9.5.4-canary.21' without breaking anything ?

  • npm outdated didn't help
  • npm i [email protected] led to error _Could not find files for / in .next/build-manifest.json
    Could not find files for / in .next/build-manifest.json_

I confirm this is fixed in 9.5.4. I changed mine to "next": "9.5.4-canary.21", in package.json

@tobyhinloopen can you tell me how to upgrade from '9.5.3' to '9.5.4-canary.21' without breaking anything ?

  • npm outdated didn't help
  • npm i [email protected] led to error _Could not find files for / in .next/build-manifest.json
    Could not find files for / in .next/build-manifest.json_

Note that the canary versions do contain bugs. npm outdated doesn't help because I suppose it doesn't upgrade to beta/alpha versions. (I assume that's what canary is)

You can try to destroy all temporary files (basically anything that can be generated) and try a clean start. You can destroy everything not tracked into source control using:

# warning: this will delete EVERYTHING not in source control
git clean -fdx
# end of warning

I upgraded by putting "next": "9.5.4-canary.23", in my package.json and running npm i or yarn install

Was this page helpful?
5 / 5 - 1 ratings