HMR not working when updating locale files with lazy: true

[Akryum]

Version

nuxt-i18n: 6.15.1
nuxt: 2.14.6

Nuxt configuration

mode:

• universal
• spa

Nuxt-i18n configuration

Reproduction Link

https://github.com/Akryum/nuxt-i18n-hmr

Steps to reproduce

• Create fresh new Nuxt project
• Add nuxt-i18n
• Setup a lazy js locale file
• Run dev
• Change locale content

What is Expected?

• Locale is updated on the client

What is actually happening?

• Nothing happens after rebuild

Browser console:

client.js?1b93:241 [HMR] bundle rebuilding
client.js?1b93:250 [HMR] bundle 'client' rebuilt in 169ms
process-update.js?e135:51 [HMR] Checking for updates on the server...
process-update.js?e135:123 [HMR] Nothing hot updated.

Workaround

• Make a full page refresh everytime the locale has changed.

[rchl]

I'm not sure if there is a way to fix that. I can't see one at least. We'd need to manually trigger re-load of locales on HMR event but I don't see any way to add a hook for that.

[tvld]

Have same problem. When I change some locale text in our en.coffee, I see the page regenerating but I need to refresh browser before I see the new changed text. This did worked in one of the previous versions, I am 100% sure: we have been working like this all spring and summer... I do not know exactly what version broke the HMR though...

Related to #807 ?

[rchl]

There was a change 6.13.3 that made the default locale be loaded from NuxtState to avoid an extra network request on initial load. Could be that that broke HMR.

[tvld]

Ah, would you know anyway to circumvent this? This issue slows down our coding every day so I would be glad if we can fix this )

[tvld]

Ok, thank you for the tip... npm remove nuxt-i18n and npm install nuxt-i18n@6.13.2 solved the issue... it is working again :-) )))

[kissu]

Had this issue too. Hope it gets fixed until then, I found that we can set this kind of configuration.

[
  'nuxt-i18n',
  {
	...
    vuex: {
      moduleName: 'i18n', 
      syncLocale: false, 
      syncMessages: false, 
      syncRouteParams: false, // only this one is mandatory for the configuration actually
    },
  },
],

⚠️ Warning, it will disallow the usage of switchLocalePath. I don't use it so I'm fine. 👍🏻

Thanks to #644 who helped me find this one !

EDIT: nvm, it's still buggy. 😭

[tvld]

@kissu you need to downgrade as well to make it work?

[kissu]

@tvld tried your version, wiped my node_modules and cleaned .nuxt before installing this specific version.
Still got the error. Then I tried w/ syncRouteParams: false and now it's working. Didn't get a single error for now.

Didn't thought about it at first, thanks ! 🙏🏻

Do we know where does it come from ?

[kissu]

Coming for updates: it is not working properly, still the same issue. Gonna remove lazy loading I guess. x)

[tvld]

For what it is worth, I use these settings:

i18n: {
    vueI18n: {
      fallbackLocale: 'en',
      // messages: {
      //   en: require('./assets/lang/en.coffee'),
      //   nl: require('./assets/lang/nl.coffee')
      // },
      silentTranslationWarn: true
    },
    seo: false, // memory leak / performance issue if = true?
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'site_language',
      alwaysRedirect: true,
      fallbackLocale: 'en'
    },
    // loadLanguagesAsync: true,
    defaultLocale: 'en',
    strategy: 'prefix_except_default',
    // parsePages: true
    lazy: true,
    langDir: 'assets/lang/',
    locales: [
      {
        name: 'English',
        code: 'en',
        iso: 'en-US',
        file: 'en.coffee'
      },
      {
        name: 'Nederlands',
        code: 'nl',
        iso: 'nl-NL',
        file: 'nl.coffee'
      }
    ],
    vuex: {
      moduleName: 'my-i18n',
      syncLocale: false,
      syncMessages: false,
      syncRouteParams: true
    }
  },

But I must say for now I use only English, I did not test in quite some time the language switching... )

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[sellou]

I have the same issue with these packages

"nuxt": "^2.15.2",
"nuxt-i18n": "^6.20.4",
"vue": "^2.6.12",

I tried both the lazy and the non lazy options. Sometimes I need to reload the whole server and sometimes only the page. Did you find any solution ? Thanks

i18n: 
  locales : [
        { code: 'en', iso: 'en-US', file: 'en.js', dir: 'ltr', name: 'English' },
        { code: 'es', iso: 'es-ES', file: 'es.js', dir: 'ltr', name: 'Español' },
        { code: 'fr', iso: 'fr-FR', file: 'fr.js', dir: 'ltr', name: 'Français' },
      ],
      seo                   : true,
      lazy                  : true,
      baseUrl               : 'https://babelglobe.com',
      langDir               : 'assets/locales/',
      defaultLocale         : 'en',
      detectBrowserLanguage : {
        fallbackLocale : 'en',
        onlyOnRoot     : true,
      },
      vueI18n : {
        fallbackLocale : 'en',
        // messages       : { en, es, fr }
      }
}

[rchl]

Fixed in https://github.com/nuxt-community/i18n-module/releases/tag/v6.21.1

[appinteractive]

@rchl now I get:

Ignored an update to unaccepted module ./lang/en.json -> ./lang lazy recursive ^\.\/.*\.json$ -> ./lang/index.js -> ./plugins/co-co/index.ts -> ./.nuxt/index.js -> ./.nuxt/client.js -> 0

[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See https://webpack.js.org/concepts/hot-module-replacement/ for more details.

[rchl]

Which nuxt-i18n version exactly? I might have broken it in the today's release but previous should work

[rchl]

If it's still failing with previous version then you might want to provide reproduction steps

[bahung1221]

same issue here when using lazy: true, each time I change a text inside a translation file that will cause the app full reload instead of hot reload.

I tried 6.20.6 and ^6.28.0

process-update.js?e135:22 Ignored an update to unaccepted module ./i18n/build/vi.json -> ./.nuxt/nuxt-i18n/options.js -> ./.nuxt/nuxt-i18n/plugin.main.js -> ./.nuxt/index.js -> ./.nuxt/client.js -> 0

I created a new issue: #1252

[nzesalem]

I recently ran into a similar issue... I solved it by simplifying my folder structure.

My folder structure looked something like this;
| project
-| components
- -| Article
- - -| ArticleComponent.vue
- - -| ArticleComponent2.vue
- - -| new
- - - -| NewComponent.vue
- - - -| NewComponent2.vue
-| pages

I changed it to something like;
| project
-| components
- -| Article
- - -| ArticleComponent1.vue
- - -| ArticleComponent2.vue
- -| CreateArticle
- - -| Component1.vue
- - -| Component2.vue
-| pages

And that solved the issue

I wrote about it in detail here 👉: https://vorlume.com/nzesalem/stories/nuxt-file-changes-not-triggering-rebuild-in-nuxt-and-how-i-fixed-it