Router query chops away chars

[vongohren]

Bug report

Describe the bug

When passing some variables as query parameter, some chars get removed in router.query values.
Feks phonenumbers: +47111111111, then when getting the query.contact, the pluss is gone.
Is there a way for me to tap into this to get the pluss added?

I tried encoding before sending in, but + is not misunderstood.
I see the right value, with the +, in the asPath variable

To Reproduce

const Index = () => {
  const router = useRouter()
  const { contact } = router.query
  const hasThePlussSign = router.asPath;
  return (
    <div>
      {contact}
    </div>

  )
}

Expected behavior

Get the + sign included in the query value

System information

• OS: macOS
• Browser (if applies): chrome
• Version of Next.js: 9.1.4

[timneutkens]

Please try next@canary

[vongohren]

@timneutkens not sure what might be the problem. But still not working on this version

  "name": "next",
  "version": "9.2.1-canary.7",

This is the object im getting, so the value gets all the way, but not out of the query

ServerRouter {
  route: '/',
  pathname: '/',
  query:
   [Object: null prototype] { frame: 'true', contact: ' 4711111111', fullWidth: 'true' },
  asPath: '/?frame=true&contact=+4711111111&fullWidth=true' }

[vongohren]

Do I need to update anything else? I don't think any of my next dependencies affect this

    "next": "9.2.1-canary.7",
    "next-compose-plugins": "^2.2.0",
    "next-images": "^1.2.0",
    "next-transpile-modules": "^2.3.1",

[Timer]

Are you encoding your URI component? It needs to be %2B.

[vongohren]

@Timer I tried encoding it but there was not difference. The pluss sign in the asPath is still the same. Is there a different parsing methodolygo for asPath and query?

[Timer]

Please provide a fully reproducible demo as we tested this behaves correctly:
https://github.com/zeit/next.js/pull/10186/files

[vongohren]

@Timer ok, so what I did was using encodeURI and not encodeURIComponent. Which doesnt escape +. So when I used encodeURIComponent on only the contact info im able to use it like I want it to work!

But what I wonder about is the value of asPath, it has the pluss sign in it.
And emails worked fine without encoding the value.
So since @ technically falls in the same category as +: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI

I wonder why it works when I enter an email.
test@test.com, the value came out correct.
+47111111111, the value dropped the pluss.

Is there a difference since the pluss is the first char?
All this comes into the next code the same way, through a query parameter
https://example.com?contact=test@test.com
https://example.com?contact=+47111111111

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.