Cannot read property '$i18n' of undefined

[michahell]

Describe the bug I am getting an error in the console after installing the plugin, setting up a basic config and copy pasting the language switcher example component. I feel like I am missing some part of the setup process, but I don't know which...

This is my gridsome.config.js plugin config:

{
      use: "gridsome-plugin-i18n",
      options: {
        locales: [
          'nl-nl',
          'en-us'
        ],
        pathAliases: {
          'nl-nl': 'nl',
          'en-us': 'en'
        },
        fallbackLocale: 'nl',
        defaultLocale: 'nl',
        messages: {}
      }
    }

copy pasting the example language switcher on https://gridsome.org/plugins/gridsome-plugin-i18n:

<template>
  <select v-model="currentLocale" @change="localeChanged">
    <option v-for="locale in availableLocales" :key="locale" :value="locale">{{ locale }}</option>
  </select>
</template>

<script lang="js">
export default {
  name: "LocaleSwitcher",
  data: () => {
    return {
      currentLocale: this.$i18n.locale.toString(),
      availableLocales: this.$i18n.availableLocales
    }
  },
  methods: {
    localeChanged () {
      this.$router.push({
        path: this.$tp(this.$route.path, this.currentLocale, true)
      })
    }
  }
}
</script>

I can see, after rebuilding (successfully) that my site now has language prefixes, i.e. /{lang}/blog etc. etc. However, the $i18n property is not available on the Vue prototype, it seems:

[Vue warn]: Error in data(): "TypeError: Cannot read property '$i18n' of undefined"

found in

---> <LocaleSwitcher> at src/components/LocaleSwitcher.vue
       <Layout> at src/layouts/Default.vue
         <App> at src/App.vue
           <Root>

To Reproduce Steps to reproduce the behavior: this is my current package.json (based off of the sanity gridsome starter, updating some dependencies and adding others)

{
  "name": "sanity-gridsome-web",
  "private": true,
  "scripts": {
    "build": "gridsome build",
    "dev": "gridsome develop",
    "explore": "gridsome explore"
  },
  "dependencies": {
    "@sanity/image-url": "^0.140.22",
    "dotenv": "^8.6.0",
    "gridsome": "^0.7.23",
    "gridsome-source-sanity": "^1.0.5",
    "sanity-blocks-vue-component": "^0.1.0"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.3.2",
    "gridsome-plugin-bundle-analyzer": "^1.0.0",
    "gridsome-plugin-i18n": "^1.6.0",
    "gridsome-plugin-tailwindcss": "^4.1.1",
    "gridsome-plugin-typescript": "^0.4.0",
    "lodash": "^4.17.21",
    "node-sass": "^4.14.1",
    "sass-loader": "^8.0.2",
    "tailwindcss": "^2.1.2",
    "ts-loader": "^9.1.1",
    "typescript": "^4.2.4"
  }
}

Expected behavior I expected the $i18n property to be there and moreover, having a simple language switcher to demo the language switching to work.

Screenshots N/A

Environment (please complete the following information):

• OS: Mac OSX 11.3.1 (big sur)
• NodeJS Version: v14.15.1
• Gridsome Version Version: 0.7.23
• Browser: Chrome
• Plugin Version: 1.6.0

Plugin configuration pasted earlier, above

[daaru00]

Hi @michahell,

I tried to reproduce your issue but without success: https://codesandbox.io/s/gridsome-plugin-issue-39-7lhv2 it use the same code:

{
  data: function() {
    return {
      currentLocale: this.$i18n.locale.toString(),
      availableLocales: this.$i18n.availableLocales
    };
  }
}

Maybe can be related to some errors during VueI18n bootstrap: https://github.com/daaru00/gridsome-plugin-i18n/blob/master/gridsome.client.js#L14-L18

Did you see any error in the browser console?

[michahell]

@daaru00 thanks for taking a look! I'm a bit busy the coming week but I will have a look as soon as I can - it must be something specific related to gridsome, the sanity.io blog starter i'm building on top of or something in my gridsome config 🤔

[michahell]

hello @daaru00 ! I tried again to figure out what is wrong, but I don't understand what is happening. It seems that either Vuei18n or the plugin does not start or is not detected entirely - looking at the amount of errors in the console:

[Vue warn]: Error in data(): "TypeError: Cannot read property '$i18n' of undefined"

found in

---> <LocaleSwitcher> at src/components/LocaleSwitcher.vue
       <Layout> at src/layouts/Default.vue
         <App> at src/App.vue
           <Root>

and

vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "currentLocale" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <LocaleSwitcher> at src/components/LocaleSwitcher.vue
       <Layout> at src/layouts/Default.vue
         <App> at src/App.vue
           <Root>

and

vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "availableLocales" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <LocaleSwitcher> at src/components/LocaleSwitcher.vue
       <Layout> at src/layouts/Default.vue
         <App> at src/App.vue
           <Root>

[michahell]

hmmm, the weird thing is, translation definitely works ánd I don't get any errors whenever I uncomment the LocaleSwitcher component in my gridsome Layout. But if I use the default LocaleSwitcher component, I get all the errors listed above.. 🤔

[michahell]

I can't get any of this to work, now my GQL language queries are failing. I'll just go with one language for now, this is costing me too much precious time right now :( Wish I had the time and knowledge to debug this better, but I don't atm.