% in url parameter causes "Uncaught URIError: URI malformed"

[nodabladam]

Bug report

Hitting a next.js site with a query string parameter containing a percent sign causes consumer to experience a plain white screen.

To Reproduce

Hit a next.js site with a query parameter containing a percent sign:
https://vercel.com/?q=%

Expected behavior

Page still renders fine and perhaps console logs that a query parameter had a URI malformed issue.

Full Error

URIError: URI malformed
    at decodeURIComponent (<anonymous>)
    at push../node_modules/querystring-es3/decode.js.module.exports (decode.js:68)
    at Container.componentDidMount (index.js:12)
    at commitLifeCycles (react-dom.development.js:19814)
    at commitLayoutEffects (react-dom.development.js:22803)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at HTMLUnknownElement.sentryWrapped (helpers.js:71)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at commitRootImpl (react-dom.development.js:22541)
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at commitRoot (react-dom.development.js:22381)
    at finishSyncRender (react-dom.development.js:21807)
    at performSyncWorkOnRoot (react-dom.development.js:21793)
    at scheduleUpdateOnFiber (react-dom.development.js:21188)
    at updateContainer (react-dom.development.js:24373)
    at react-dom.development.js:24758
    at unbatchedUpdates (react-dom.development.js:21903)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757)
    at Object.hydrate (react-dom.development.js:24823)
    at renderReactElement (index.js:38)
    at doRender$ (index.js:44)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at tryCatch (runtime.js:45)
    at invoke (runtime.js:135)
    at runtime.js:170
    at new Promise (<anonymous>)
    at callInvokeWithMethodAndArg (runtime.js:169)
    at AsyncIterator.enqueue [as _invoke] (runtime.js:192)
    at AsyncIterator.prototype.<computed> [as next] (runtime.js:97)
    at Object.push../node_modules/regenerator-runtime/runtime.js.exports.async (runtime.js:216)
    at doRender (index.js:40)
    at render$ (index.js:25)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:271)
    at Generator.prototype.<computed> [as next] (runtime.js:97)
    at tryCatch (runtime.js:45)
    at invoke (runtime.js:135)
    at runtime.js:170
    at new Promise (<anonymous>)
    at callInvokeWithMethodAndArg (runtime.js:169)
    at AsyncIterator.enqueue [as _invoke] (runtime.js:192)
    at AsyncIterator.prototype.<computed> [as next] (runtime.js:97)
    at Object.push../node_modules/regenerator-runtime/runtime.js.exports.async (runtime.js:216)
    at render (index.js:25)
    at next-dev.js:4
    at fouc.js:4

System information

• OS: Windows
• Browser: chrome
• Version of Next.js: 9.3.6-canary.9
• Version of Node.js: 13.11.0

Additional context

Content is currently coming in with a raw percent on utm_content and that is out of my immediate control to change:

http://localhost:3000/?utm_content=Lookalike%201%%20-%20Ages%2035-54%20-%20USA_Product%20Focus%20-%20Conversion%20-%20Laptop%20V1_23844117712240465

The URLs are auto generated by facebook ads manager. I guess they are not properly encoding their utm_content value? If I decode the value to Lookalike 1% - Ages 35-54 - USA_Product Focus - Conversion - Laptop V1_23844117712240465 and re-encode, it works.

http://localhost:3000/?utm_content=Lookalike%201%25%20-%20Ages%2035-54%20-%20USA_Product%20Focus%20-%20Conversion%20-%20Laptop%20V1_23844117712240465

(somewhat related issue #10080)

[omar-dulaimi]

Hello,
we're facing the same issue with urls containing arabic letters. Any workarounds?
many URIError: URI malformed errors!

[blik3230]

Hi, I have a similar problem, but I am trying to put a percent sign value on a URL segment as some id for dynamic routing. Regardless of whether I am encoding a percent sign or not. If I pass it to router.push in "asPath" as part of the segment URL the same error (URIError: URI malformed) occurs.
Thanks for any help regarding this.

[grygoriy-pinkas-scx]

We have the same problem. Looks like function "parse" in router.ts decoded parameter, and further in "getRoterMatcher"(file route-matcher.ts ) pathname decodes again, and this throws error.

[ijjk]

Hi, this has been updated in the latest version of Next.js v12.0.10, please update and give it a try!

Example deployment can be seen here https://test-malformed.vercel.app/dynamic/first?utm_content=Lookalike%201%2520-%20Ages%2035-54%20-%20USA_Product%20Focus%20-%20Conversion%20-%20Laptop%20V1_23844117712240465