Quasar: Configuring the language pack in SSR sets a wrong HTML 'lang' attribute

Created on 4 May 2020 · 11Comments · Source: quasarframework/quasar

I don't know whether you might want to close this one or reopen #6944. I've created again the same report because, after doing what was suggested, the issue is still present. Of course it is related to a singleton issue, but it is not solved by implementing the logic in App.vue and accessing the client's own instance (this.$q.lang.set etc etc).

If something is wrong on the way I'm understanding, please tell me before closing again. I want to make sure we are on the same channel.

Describe the bug
The HTML lang attribute does not change correctly when configuring the language pack in SSR mode.

Codepen/jsFiddle/Codesandbox (required)
Updated with suggestions:
https://codesandbox.io/s/quasar-issue--93vw1?file=/src/App.vue

To Reproduce

Go to path /. The default language pack (en-us) is set. Everything OK.

<html lang=en-us dir=ltr>

Then go to /fr. In the App.vue file, this route triggers the language pack configuration. We can either _right click->View page source_ or use Postman, for example, to see that the generated markup did not change.

<html lang=en-us dir=ltr>

Refresh the same route. There we have it; changed after the first time.

<html lang=fr dir=ltr>

Go back to / and refresh. We should see lang=en-us again, but we receive lang=fr; a polluted response with the preceding request.
If we restart the server, and enter to / one more time, en-us locale is back.

Expected behavior
A homogeneous lang attribute when setting the language pack.

Platform (please complete the following information):
OS: Linux 4.15.0
Node: 12.13.0
NPM: 6.14.0
Browsers: Chromium 81.0.4044.129

Additional context
SSR mode.

bug

Source

hecsalazarf

Most helpful comment

This one was much tougher than it seems. Won't go into details, but: in Quasar v1.11.0 (next version), this will be the new usage:

// ssrContext available in boot files as param
Quasar.lang.set(langObject, ssrContext)

rstoenescu on 8 May 2020

🎉2 ❤1

All 11 comments

This one was much tougher than it seems. Won't go into details, but: in Quasar v1.11.0 (next version), this will be the new usage:

// ssrContext available in boot files as param
Quasar.lang.set(langObject, ssrContext)

rstoenescu on 8 May 2020

🎉2 ❤1

Same problem is when setting Quasar Icon Sets in SSR, and will fix it too.

rstoenescu on 8 May 2020

Just to be clear: also fixed the this.$q.lang.set(langObject) usage.

rstoenescu on 8 May 2020

I knew it was though (:
Thanks.

hecsalazarf on 8 May 2020

This change seems to have broken something for umd rtl languages (specifically arabic)
Calling
Quasar.lang.set(Quasar.lang['en-us']);
Now gives me
Uncaught TypeError: Cannot read property 'rtl' of undefined at Object.set (https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js:6:12202) at :1:13

Where as there was no problem with quasar 1.10.5

patrickas on 23 May 2020

please use the latest - v1.11.3

pdanpdan on 23 May 2020

I get the same problem with 1.11.3...
Uncaught TypeError: Cannot read property 'rtl' of undefined at Object.set (https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js:6:12202) at :1:13

I was using the latest and was just checking when it stopped working so I found 1.11.0 and guessed it was this issue.

patrickas on 23 May 2020

@patrickas Usage:

// ssrContext available in boot files as param
Quasar.lang.set(langObject, ssrContext)

OR:

// in vue components
this.$q.lang.set(langObject)

rstoenescu on 23 May 2020

Maybe I am misunderstanding the issue or the fix.
Using this.$q.lang.set(langObject) changes nothing.

https://jsfiddle.net/6ea31jL8/6/

This fiddle shows that 'en-us' does not work while using quasar 1.11.x
But the exact same code works if you just load 1.10.5 instead of 1.11.3

In case I am doing something wrong in that code and the breakage is deliberate it should at least be mentioned in the release notes with the right way to fix it since it breaks currently working applications

patrickas on 23 May 2020

I opened a separate case so as not to keep hijacking this closed one.

patrickas on 26 May 2020

@patrickas issue will be fixed in Quasar v1.12 - https://github.com/quasarframework/quasar/issues/7108

rstoenescu on 26 May 2020

Was this page helpful?

0 / 5 - 0 ratings