Language switches to default when using templates (pages generated using pageAPI)

[tandeman77]

Hi @daaru00,

I notice that the plugin doesn't work correctly when I use the pageAPI to create a page. For some reason, the current language changes when I navigate from a page component (automatically generated by Gridsome through the "pages" folder) to template pages (generated via page API using a component in the "templates" folder). When navigating to a template created page, or entering (refresh) a template page, the language always reverts to the default language (based on $i18n.locale).

I reproduced the problem in a new repo for you to have a look. In the example, you'll see that when you navigate between any pages, excluding "contact" and "extra", the plugin works fine. When visiting the "contact" or the "extra" page which are generated using a template, it switches languages automatically to default.

To Reproduce
Steps to reproduce the behaviour:
check out this example repo https://github.com/tandeman77/gridsome-test

Expected behaviour
Expected behaviour should be that language stays the same as the previous page.

Environment (please complete the following information):

• OS: Windows 10
• NodeJS Version: v12.16
• Gridsome Version: 0.7.0
• Browser: Chrome
• Plugin Version: "daaru00/gridsome-plugin-i18n#fix/duplicated-path"

Plugin configuration

{
      use: "gridsome-plugin-i18n",
      options: {
        locales: [
          // locales list
          "en-GB",
          "th-TH",
        ],
        pathAliases: {
          // path segment alias for each locales
          "en-GB": "en",
          "th-TH": "th",
        },
        fallbackLocale: "en-GB", // fallback language
        defaultLocale: "en-GB", // default language
        enablePathRewrite: true, // rewrite path with locale prefix, default: true
        rewriteDefaultLanguage: false, // rewrite default locale, default: true
      },
    },  'fr-fr': require('./src/locales/fr-fr.json'),
          'de-de': require('./src/locales/de-de.json'),
          'en-gb': require('./src/locales/en-gb.json'),
        }
      }
    }

[daaru00]

Hi @tandeman77,

did you still replicate it with the latest version? it seems like some problem with context variables, by chance if you check in the $context or in the route's meta do you see the locale property disappear?

[helloiamlukas]

Please have a look at #32

I just opened a pull request to solve this issue.

[ericwaetke]

Temporary Workaround until this gets fixed:
cou can manually inject the language code you use in the url to your g-links.

In my case it looks like this:
<g-link class="nav__link" :to="'/'+$context.locale+'/about/'">{{$t("menu.about")}}</g-link>

Not the fanciest solution, but it works.

[helloiamlukas]

Temporary Workaround until this gets fixed:
cou can manually inject the language code you use in the url to your g-links.

In my case it looks like this:
<g-link class="nav__link" :to="'/'+$context.locale+'/about/'">{{$t("menu.about")}}</g-link>

Not the fanciest solution, but it works.

Unfortunately this still doesn't solve the issue, as the $context doesn't include the actual locale – the locale falls back to the default locale. As already mentioned, I resolved this here: #32

[ericwaetke]

The locale still falls back to the default with your code, however. When taking out the $contect.locale the $context changes on page-switch. On links with the added $contect.locale the $context does not change

Edit: I didn't deep-dive in this top, so I don't know why this happens, just that it does :D

[helloiamlukas]

Can you provide an example repo? In all my tests the locale didn't fall back to the default with the fix of this pull request.

[ericwaetke]

Sure!
https://github.com/Thaiten/localization-bug

I've included the my "temporary workaround" from earlier commented out so you can test the difference!

Edit: I seem to have overlooked the $tp() style of using g-links. I haven't had time to update the repo above, but I am aware of it!

[helloiamlukas]

@ericwaetke I looked up your code now.

The problem with the $context.locale falling back to the default only applies to Templates. In your example however, you are exclusively using Pages.

Your problem is not related to this issue at all. As you already mentioned in your edit, you forgot to use the $tp helper function – by using this, everything will work as expected ☺️