Nuxt.js: router.base value with Extended unicode (åäö) fails

[jroxendal]

Version

v2.4.1

Steps to reproduce

yarn create nuxt-app test_nuxt && cd test_nuxt (I selected express and not much else)

Drop router: { base: "/%C3%B6l/", }
intro you nuxt config. start a dev server. go to http://localhost:3000/öl.

What is expected ?

I expect the site to load properly from the /öl url.

What is actually happening?

you may see the page blink and disappear with a DOM tree mismatch hydration error in the console. mode: 'spa' doesn't work at all (it can't find the page). base addresses without weird characters work fine.

my live nuxt site running at https://litteraturbanken.se/översättarlexikon/ exhibits another symptom: using the back button at any time throws up the 404 page. cannot reproduce this with a minimal example, however.

_{This bug report is available on Nuxt community (#c8606)}

[jroxendal]

For added context: creating a vue project using the vue cli with vue-router I can get it to work no problem: I use:

export default new Router({
  mode: 'history',
  base: "/öl/"

It seems that in nuxt it's around line 160 in connect/index.js the problem happens:
if (path.toLowerCase().substr(0, route.length) !== route.toLowerCase()) {
here, path is url encoded but the route isn't (when base='/öl/' is specified). I can get further by manually modifying the request url in the server handler:

app.use(function(req, res, next) {
    req.url = decodeURIComponent(req.url)
    return nuxt.render(req, res, next)
  })

in mode spa that gives me a page at least, though a handled 404 when I refresh. mode universal throws hydration error still.

[jroxendal]

@manniL just a ping about this issue, which is still wreaking havoc on my production site. Did anyone have time to look at it yet?

[manniL]

@jroxendal Not yet unfortunately. A few things:

• Does it work with base: '/öl' by any chance?
• Does it work with a standalone nuxt instance (no server framework)?

[jroxendal]

Thanks for getting back to me. Testing with nuxt 2.4.0:

base: '/öl gives at 404 at localhost:3000/, which is expected. it also gives a 404 at localhost:3000/öl and /öl/, unfortunately. For /öl, the message is:
Cannot GET /%C3%B6l.

Use a custom server framework: none when scaffolding with yarn create nuxt-app.

[manniL]

@jroxendal alright. and using base: "/%C3%B6l/" + nuxt standalone (no custom server framework) will net the same results as described in the original issue?

[jroxendal]

Yeah, same as original post. Page blinks, screen goes white, hydration error in console when using base: "/%C3%B6l/" (no custom framework).

[manniL]

Alright.

My guess is that the router base doesn't match the actual URL path because of different en-/decoding :thinking:

[jroxendal]

yeah, see me comment from feb 5 about the line 160 in connect/index.js above. there seems to be some issue where path and route variables do match when base is /ol but not when they're öl. just going in there and encoding one side or decoding the other wasn't enough, though. 🤷‍♂️

[manniL]

I think I found sth.

[jroxendal]

short and sweet solution 😀

[jroxendal]

Bad news: still getting hydration error from this fix. It is show the page now, no blink then white screen, but hydration error in log. @manniL are we sure the test you wrote actually checks for hydration errors?

[manniL]

@jroxendal let me test it again :wink:

[manniL]

No white screen anymore. But you are right, hydration errors coming up again :thinking: