I18n-module: Cannot read property '_t' of null & Cannot read property 'locale' of null

[fanwenfu]

Version
v5.12.3

Reproduction link
Not necessarily reproduce

What is expected ?
Working normally

My configuration

_{This question is available on Nuxt community (#c242)}

[cmty[bot]]

This issue as been imported as question since it does not respect nuxt-i18n issue template. Only bug reports and feature requests stays open to reduce maintainers workload.
If your issue is not a question, please mention the repo admin or moderator to change its type and it will be re-opened automatically.
Your question is available at https://cmty.app/nuxt/nuxt-i18n/issues/c242.

[rchl]

Are you able to create minimal testcase on codesandbox? I feel this could be a problem with how you use i18n instead of the module itself.

[MLDMoritz]

I also get Cannot read property 'locale' of null in this part:

```js
if (!route) return;
locale = locale || this[i18nPath].locale;

[rchl]

Can't help unless you show the code. It can happen if i18n mixin methods are used from wrong this context but that doesn't mean there is a bug in this module, necessarily.

[fanwenfu]

Can't help unless you show the code. It can happen if i18n mixin methods are used from wrong this context but that doesn't mean there is a bug in this module, necessarily.

Because it's not inevitable.So I don't know how to create minimal testcase on codesandbox.
Except for pages, there are only two places where locale is used

[dschreij]

I have the same problem. It mainly seems to occur when I use i18n functions in the head(){} function of my page (in which i use them to populate ld+json fields). Strangly, it only occurs on a second load of the page. On first load, or after a hard reload, everything works as expected.
Using:
nuxt: 2.9.2
vue: 2.6.10
nuxt-i18n: 6.2.1
vue-i18n; 8.14.1 (it is separately listed in my package.json).

Here's the code:

head () {
    const path = this.$route.path.split('/').filter(segment => !!segment)
    let url = ''
    if (path[0] === 'nl') {
      url += '/' + path.splice(0, 1)
    }
    if(this.blog !== 'error') {
      return {
        title: this.blog.content.attributes.title,
        script: [
        ...
        {
          hid: 'blogPosting',
          type: 'application/ld+json',
          body: true,
          innerHTML: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "BlogPosting",
            "mainEntityOfPage": {
              "@type": "WebPage",
              "@id": 'https://attentionarchitects.com' + this.localePath('blog')

Last line is the culprit, causing

consola.browser.js:1 error TypeError: Cannot read property 'locale' of null
    at VueComponent.localePath (plugin.routing.js:27)
    at VueComponent.head (_slug.vue:202)
    at Watcher.get (vue.runtime.esm.js:4473)
    at Watcher.evaluate (vue.runtime.esm.js:4578)
    at VueComponent.computedGetter [as $metaInfo] (vue.runtime.esm.js:4830)
    at VueComponent.<anonymous> (vue.runtime.esm.js:503)
    at Watcher.get (vue.runtime.esm.js:4473)
    at new Watcher (vue.runtime.esm.js:4462)
    at VueComponent.Vue.$watch (vue.runtime.esm.js:4940)
    at VueComponent.<anonymous> (vue-meta.esm.js:279)

Similarly, on another page the code below causes a 'Cannot read property '_t' of null'

head () {
    const title = this.$t('nav.services')
    ...

Output:

TypeError: Cannot read property '_t' of null
    at VueComponent.Vue.$t (vendors.app.js:37023)
    at VueComponent.head (_nuxt/pages/services/index.js:269)
    at Watcher.get (commons.app.js:14416)
    at Watcher.evaluate (commons.app.js:14521)
    at VueComponent.computedGetter [as $metaInfo] (commons.app.js:14771)
    at VueComponent.<anonymous> (commons.app.js:10453)
    at Watcher.get (commons.app.js:14416)
    at new Watcher (commons.app.js:14405)
    at VueComponent.Vue.$watch (commons.app.js:14881)
    at VueComponent.<anonymous> (commons.app.js:5787)

My nuxt-i18n config (located in a separate module) is:

function servicesRoutes(){
  const structure = {
    neuromarketing: {
      shopper: {
        nl: 'winkelgedrag'
      },
      ads: {
        nl: 'advertentieonderzoek'
      },
      packaging: {
        nl: 'verpakkingsonderzoek'
      }
    },
    humanfactors: {
      wayfinding: {
        nl: 'navigatie'
      },
      pictograms: {
        nl: 'pictogramonderzoek'
      }
    }
  }

  return Object.entries(structure).reduce( (result, [category, pages]) => {
    for( let [page, translations] of Object.entries(pages)){
      result[`services/${category}/${page}`] = {}

      for( let[lang, translation] of Object.entries(translations)) {
        result[`services/${category}/${page}`][lang] = `/diensten/${category}/${translation}`
      }
    }
    return result
  }, {})
}

module.exports = {
  parsePages: false,
  lazy: true,
  langDir: '/lang/',
  seo: false, // change this back to true once https://github.com/nuxt-community/nuxt-i18n/issues/100 has been fixed
  locales: [
    {
      code: 'en',
      iso: 'en-US',
      name: 'English',
      file: 'en-US.js'
    },
    {
      code: 'nl',
      iso: 'nl-NL',
      name: 'Nederlands',
      file: 'nl-NL.js'
    }
  ],
  defaultLocale: 'en',
  pages: {
    index: {
      en: '/',
      nl: '/'
    },
    'services/index': {
      en: '/services',
      nl: '/diensten'
    },
    contact: {
      nl: '/over-ons',
      en: '/about-us'
    },
    'showcase/index': {
      nl: '/cases',
      en: '/showcase'
    },
    'showcase/_slug': {
      nl: '/cases/:slug',
      en: '/showcase/:slug'
    },
    ...servicesRoutes()
  },
  vueI18n: {
    fallbackLocale: 'en'
  }
}

```

[rchl]

@dschreij your problem seems to be related to using head (vue-meta) more so than i18n itself. You've posted two completely different stack traces, one is unrelated to $t or vue-i18n itself. I'm pretty sure accessing any property of Vue object, even one unrelated to nuxt-i18n or vue-i18n will crash. So I would look for problems elsewhere.

[rchl]

For example try replacing this.$t with this.$route.path. I think it might fail similar way.

[dschreij]

For example try replacing this.$t with this.$route.path. I think it might fail similar way.

That works, otherwise it would have crashed on the first line of head(){} in the first example, which uses this.$route.path

You've posted two completely different stack traces, one is unrelated to $t or vue-i18n itself.

The first stack trace refers to this.localePath, which is a function of nuxt/vue-i18n as far as I know. The second example chokes on this.$t, which is definitely part of the library.

I agree this error is likely caused by a combination of vue-meta and i18n, but am I and the OP the only ones experiencing them?

[rchl]

The first stack trace refers to this.localePath, which is a function of nuxt/vue-i18n as far as I know. The second example chokes on this.$t, which is definitely part of the library.

localePath is a method from this module. But in any case, since you can reproduce, it should be fairly easy for you to create minimal repro case. You might even find the problem while doing so. I can't tell why this.$i18n would be undefined for you. I'm also using this.$t in my head functions and I don't have the problem.

[dschreij]

This has been fixed in the newest versions of nuxt, and potentially vuetify

[rchl]

Just a note for people potentially finding this through search - using $t or other vue-i18n APIs can crash if using them from async functions since component can get destroyed in the meantime.

[SebastienTainon]

Thanks, I has exactly the same problem and that helped a lot!

[rhwilr]

I encountered this problem as well but it is caused by a slightly different scenario:

<template>
  <div @click="navigate">To Dashboard</div>
</template>

<script>
export default {
  methods: {
    navigate () {
      this.$router.push(this.localePath({ name: 'dashboard' }))
    }
  }
}
</script>

This works perfectly fine. However, when the user douple-clicks the link, the first click will trigger the navigation, the second click will throw the error, since the component has already been unmounted.

[rchl]

@rhwilr Thanks for that example - can be useful for people who stumble on this error.

Just a note that that particular case can be simplified to something that potentially won't have the same problem (I haven't tried though):

<template>
  <nuxt-link :to="localePath('dashboard')">To Dashboard</nuxt-link>
</template>

(But maybe that example was oversimplified to just show the issue)