I18n-module: Lazy Load json files after generating static files

Created on 23 Feb 2018  路  9Comments  路  Source: nuxt-community/i18n-module

Hello!

I was trying around a bit if I can use this plugin for my next project. It is awsome by the way. Could set up routing and translation in about 40 minutes! yay!

But I found one issue. When using "npm run generate" to generate static files - the first page load does not show the translations! If I change the language it starts working. It seems that on inital load the json language file is not working. Does anybody have any clue how i can solve that?

I made a git repo here https://github.com/elpeyotl/nuxt-translation. attached a screenshot of the behaviour.

Well it is only not working when generating static pages. In npn run dev it is working.

nuxt

my config
module.exports = { modules: [ ['nuxt-i18n', { locales: [ { code: 'en', iso: 'en-US', name: 'English', langFile: 'en-US.json' }, { code: 'fr', iso: 'fr-FR', name: 'Fran莽ais', langFile: 'fr-FR.json' }, { code: 'de', iso: 'de-DE', name: 'Deutsch', langFile: 'de-DE.json' } ], loadLanguagesAsync: true, langDir: 'lang/', defaultLocale: 'en', // ... }] ] }

This bug report is available on Nuxt.js community (#c24)
bug 馃悰

Most helpful comment

Looks like the bug is fixed. Thank you, Paul! But there is another (rare) edge case. Will open up a new issue for it in a second

All 9 comments

Even if I run "npm run build" and then "npm run start" i see the same behaviour.

If load the files not asynchrously it works:

    vueI18n: {
      messages: {
       fr: require('./lang/fr-FR.json'),
      en: require('./lang/en-US.json'),
      de: require('./lang/de-DE.json')
    },

I think it's similar to my problem discussing in #23 .

@mahmoudmy I downloaded your repo and was running it. Could find any issue? How to you build it? I run it with npm run dev. and it was showing first page in english. when i click on house it changed to arabic.

Thanks @elpeyotl . The first page wasn't in English, it just shows the message keys (CAPITAL LETTERS) and this is the bug!

@mahmoudmy

If I change your config file like this it works. But it not asynchrous anymore.

            module.exports = {
        locales: [{
            code: 'fa',
            iso: 'fa-IR',
            name: '賮丕乇爻蹖',
            langFile: 'fa.js'
        }, {
            code: 'en',
            iso: 'en-US',
            name: 'English',
            langFile: 'en.js'
        }],
        defaultLocale: 'fa',
        vueI18n: {
            fallbackLocale: 'fa',
            silentTranslationWarn: true,
            messages: {
            fa: require('../locales/fa.js'),
            en: require('../locales/en.js'),
            },
        },
        }

Probably you can use that as a workaround? Dont know why on inital load the language is not loaded. I have exact the same issue.

Same problem here. It works in dev mode, but not in production (npm run build && npm start)

Hi guys, sorry for this frustrating issue. Hopefully it's fixed in v2.3.4.
@elpeyotl thanks for the repo, I tested it with the new version and it looks okay!

Looks like the bug is fixed. Thank you, Paul! But there is another (rare) edge case. Will open up a new issue for it in a second

Was this page helpful?
0 / 5 - 0 ratings

Related issues

johnboylesingfield picture johnboylesingfield  路  17Comments

jonalxh picture jonalxh  路  15Comments

vodnicearv picture vodnicearv  路  20Comments

adetbekov picture adetbekov  路  21Comments

ebeloded picture ebeloded  路  15Comments