Vue-i18n - npm run serve fails with error TypeError: Cannot read property 'i18n' of undefined

Question

I implemented my vue application with i18n and it worked all fine yesterday. But when I tried to start my application today I got the error which you can see in the title. I can give the following stack trace:

TypeError: Cannot read property 'i18n' of undefined
    at module.exports (..\node_modules\vue-cli-plugin-i18n\index.js:4:49)
    at ..\node_modules\@vue\cli-service\lib\Service.js:93:7
    at Array.forEach (<anonymous>)
    at Service.init (..\node_modules\@vue\cli-service\lib\Service.js:91:18)
    at Service.run (..\node_modules\@vue\cli-service\lib\Service.js:230:10)
    at Object.<anonymous> (..\node_modules\@vue\cli-service\bin\vue-cli-service.js:36:9)
    at Module._compile (internal/modules/cjs/loader.js:1133:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
    at Module.load (internal/modules/cjs/loader.js:977:32)
    at Function.Module._load (internal/modules/cjs/loader.js:877:14)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! <Projectname>@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the <Projectname>@0.1.0 serve script.

(I took out my paths and replaced them with "..")

I really can't explain, why I get this error now. Because yesterday I also had to restart the server and it worked all fine..

I also took out every line of code in which I use something like

$i18n.locale

(Except for the routing and code in the index.js etc.) But that didn't work for me too.

And I deleted the node_module folder as well and installed everything again but this didn't work.

If you need any information please tell me.

Answer 1

I'm pretty new to vue.js but I'm facing a similar issue (same stack trace). Here is what I have found hoping it can help you :

Adding a file vue.config.js at the root of the project with :

module.exports = {
  pluginOptions: {
    i18n: {
      locale: 'fr',
      fallbackLocale: 'en',
      localeDir: 'assets/locales',
      enableInSFC: true
    }
  }
}

seems to resolve the compilation issue (no clue if it's the right solution, I'm still searching).

What I have done to find this is vue add i18 then remove file/modification one by one util the compilation error came back.