Change translations file cause app full reload instead of hot reload (lazy: true)

[bahung1221]

Version

nuxt-i18n: 6.20.6 and 6.28.0
nuxt: 2.14.5

Nuxt configuration

mode:

• universal
• spa

Nuxt-i18n configuration

i18n: {
lazy: true,
      langDir: 'lang/',
      defaultLocale: 'fr',
      locales: [
        {
          code: 'fr',
          file: 'fr-FR.js',
          name: 'Français'
        }
      ],
      strategy: 'no_prefix'
}

Reproduction Link

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

Steps to reproduce

Change any text inside a translation file

What is Expected?

The app will be updated by hot reload

What is actually happening?

The app updated by full app reload

[rchl]

I doubt this can be fixed. Probably reloading the page is the best we can do here.

[bahung1221]

It seems this is a known issue, so I will close it.

Thanks 🍺

[appinteractive]

I doubt this can be fixed. Probably reloading the page is the best we can do here.

Why do you think that it's not possible? 🤔 is it not possible to rerun the import and replace the reactive values?

[rchl]

It's webpack that does import reloading and in that specific case, since it's an async import, the best it can do is reload the page since it wouldn't know how to reload that data.

I believe that the only way that this could be made to work is if webpack would provide some hooks to override reloading behavior for specific imports but:
a) I don't think there is such a hook (feel free to prove me wrong)
b) even if there would be a hook, I don't know if I'd really would want to have this extra code and complexity to make this (IMO trivial) case work

Also, I guess a simple fix could be to just not use lazy during development.

[appinteractive]

Also, I guess a simple fix could be to just not use lazy during development.

So if that would be really a fix (can`t validate that now) shouldn't that be mentioned with a hint in the documentation?

[tvld]

6.28.1 Solved it for me; even with lazy: true ! :-)

[tvld]

And the issue is back. And that without changing anything in nuxt.config.js ... weird ((

[tvld]

I updated nuxt.config.js with the following and now lazy loading seems to work again... but I am still investigating...::

   build: {
  
    extend (config, ctx) {
      // to solve You are using the runtime-only build of Vue where the template
      // used to render links in information-base articles
      config.resolve.alias.vue = 'vue/dist/vue.common'

      config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'

      // for language compilation we use .coffee files: these are the least overhead so easy to change for non-developers
      config.module.rules.push({
        test: /\.coffee$/,
        loader: 'coffee-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /(node_modules)/
      })
    }
  }

[paidge]

I saw how to implement Hot Reload in the official documentation of vue-i18n but I don't know where to put the if (module.hot) section in a nuxt app because I'm a newbee with nuxt :p