I18n-module: With nuxt-i18n upgrade from v6.3 to v6.13.12, other plugins are no longer available

[JBustin]

Version

nuxt-i18n: 6.13.12
nuxt: 2.14.3

Nuxt configuration

• [x] universal

Nuxt-i18n configuration

i18n: {
      locales,
      // defaultLocale: 'fra-fr',
      lazy: true,
      langDir: 'services/lang/',
      seo: false,

      // Prefix all url, including the default one
      strategy: 'prefix',

      // Disable redirection base on browser, we will implement our own strategy
      detectBrowserLanguage: 'false',

      // Localized routes
      parsePages: false,
      pages: {
        'magazine/articles/_article': {
          'deu-de': '/magazine/artikel/:article',
          'esp-es': '/magazine/articulos/:article',
          'ita-it': '/magazine/articoli/:article',
          'por-br': '/magazine/artigulos/:article',
        },
        'products/_id': {
          'esp-es': '/productos/:id',
          'fra-fr': '/produits/:id',
          'fra-ca': '/produits/:id',
          'por-br': '/produtos/:id',
          'deu-de': '/produkte/:id',
          'ita-it': '/prodotti/:id',
        },
        cart: {
          'fra-fr': '/selection',
          'fra-ca': '/selection',
          'deu-de': '/kaufen',
          'esp-es': '/cesta',
          'ita-it': '/acquistare',
          'por-br': '/carrinho',
        },
        checkout: {
          'fra-fr': '/finaliser-ma-commande',
          'fra-ca': '/finaliser-ma-commande',
          'deu-de': '/zur-kasse',
          'esp-es': '/continuar',
          'por-br': '/finalizar-a-compra',
        },
      },
      // TO BE CHANGED LATER FOR LOCAL CHOICE PAGE
      // rootRedirect: 'fra-fr',

      // http://kazupon.github.io/vue-i18n/api/#silenttranslationwarn
      // http://kazupon.github.io/vue-i18n/api/#silentfallbackwarn
      ...(process.env.LVF_I18N_SILENT_WARN || process.env.NODE_ENV === 'production'
        ? {
            vueI18n: { silentTranslationWarn: true, silentFallbackWarn: true },
          }
        : {}),
    }

Steps to reproduce

• configure the lazy loading of the lang files
• implement axios to get a lang file
• write and load a custom plugin with nuxt module (ex: $logger with consola), use it to log in lang requester service
• load nuxt-i18n module after the logger "plugin" module
• run your nuxt application, open an url, nuxt-i18n will try to request a lang file
• $logger plugin is not found in context

// nuxt.config.js
{
    modules: ['~/modules/logger', ['nuxt-i18n', {...}]]
}

// src/modules/logger.js
export default function module() {
  this.addPlugin(path.resolve(__dirname, '../plugins/nuxt/logger.js'));
}

// src/services/lang/ara-ae.js
const cli = axios.create()

export default ctx => {
    ctx.app.$logger.info('Request for ara-ae')
    return cli.get('https://www.mydomain.com/ara-ae.json', {...})
}

What is Expected?

As expected with nuxt-i18n 6.3, plugin (ctx.app.$logger) is available during lazy load on server side.

What is actually happening?

Plugin is not available during lazy load on server side.

 ERROR  Cannot read property 'info' of undefined                                                           

Regards

[padinko]

problem is in 6.13.5:
until 6.13.4 there is context.$axios
from 6.13.5 there is NO context.$axios

we need to load translations with $axios, is there any chance to have plugins loaded in this time? ($axios mostly)

[rchl]

I know what the issue is. The plugin system in nuxt is pretty annoying in being a bit unspecified regarding the order...

[rchl]

Fix released in v6.15.1

[dmocho]

This "fix" breaks the documented behavior described here: https://i18n.nuxtjs.org/api#extension-of-nuxt-context.
In particular: you can no longer refer to app.i18n.locale inside plugins.

Simple example:

// plugins/moment.js

import moment from 'moment'

export default ({ app }, inject) => {
  moment.locale(app.i18n.locale)
  inject('moment', moment)
}

In 6.15.0 the above work ok.\
In 6.15.1 it renders "trying to get property locale of undefined" accessing app.i18n.

[rchl]

There is no way to make the order work for all cases.

If there are only modules at play then the plugin registration order is opposite of the module registration order (since adding plugin from a module adds it at the start of the list).

If there are also "loose" plugins mixed into the picture then I'm not sure what is currently the order but judging from your comment, the "loose" plugins are registered before modules so run first.

In your case, you should probably create a simple module that adds the plugin using this.addPlugin. Then you can control the order by changing the order modules are registered.

This fix was to make the order predictable within modules registration.

[dmocho]

In your case, you should probably create a simple module that adds the plugin using this.addPlugin. Then you can control the order by changing the order modules are registered.

In fact this is exactly what is done in my case. I have the code I gave as example in a plugin loaded by module and that module is listed after nuxt-i18n in nuxt.config.js / modules...

[rchl]

Should be listed before nuxt-i18n. As I've said, plugins are registered in opposite order than modules themselves. Blame Nuxt.

[dmocho]

Thanks for pointing that out since I did not get it the first time. :)
With reversed module order all is fine!