Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

`Cannot read property '_t' of null` when switching layouts

See original GitHub issue

Version

v6.6.0

Reproduction link

https://gitlab.com/musiciansbass/musiciansbass-app

Steps to reproduce

I am using a modal plugin called Sweetalert2. This is the method I use to instantiate the popup:

    showLogin(bus) {
      if (process.client) {
        // popup =
        this.$swal({
          ...this.popupOpts,
          title: this.$t('login.cta.login'),
          html: '<div id="alert-content"></div>',
          onOpen() {
            bus.emit('loadLoginForm')
          },
          onClose() {
            bus.emit('closePwForm')
          }
        })
      }
    },

This works just fine if I load my homepage (which uses one layout) or I enter from a different URL (a page using a different layout) and click the login button. If I click between internal pages which use the same layout and click login, everything works as expected.

If, however, I am on an internal page and click to return to the homepage (which switches layouts), or if I am on the homepage and click to an internal page (again, switching layouts) and I click the login button, I get the following error:

TypeError: Cannot read property '_t' of null
    at VueComponent.Vue.$t (vue-i18n.esm.js?a925:178)
    at VueComponent.showLogin (Login.vue?7463:65)
    at eval (Login.vue?7463:47)
    at eval (mitt.es.js?14b7:57)
    at Array.map (<anonymous>)
    at Object.emit (mitt.es.js?14b7:57)
    at click (Buttons.global.vue?e4ea:27)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)
    at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)
    at HTMLButtonElement.sentryWrapped (helpers.js?bf37:71)

And indeed, if I console.log the component, _i18n and $i18n are null:

VueComponent {_uid: 22, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}
[...]
_i18n: null
[...]
$i18n: null
[...]
__proto__: Vue

My navigation URLs are all variations of:

<nuxt-link class="hoverline" :to="localePath(item.slug)">{{ item.title }}</nuxt-link>

Oddly, none of the components outside of the modal are having any trouble using the $t method. Only the modal has the problem. And I’m not doing anything asynchronously in terms of loading the modal itself, which I saw in a related issue as one proposed pain point.

Any help would be greatly appreciated.

Thanks