Vue-i18n: Cannot read property 'locale' of undefined

Created on 2 Mar 2017  Β·  57Comments  Β·  Source: kazupon/vue-i18n

Hi.I use the vue-router with vue-i18n together,when i changed the path,chrome remind a issue
image

my i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import cn from './zh-CN.json'
import jh from './zh-JH.json'
import store from '../store'

Vue.use(VueI18n)

export default new VueI18n({
  locale: 'zh-JH',
  messages: {
    'zh-CN': cn,
    'zh-JH': jh
  }
})

vue & vue-i18n version

```"vue": "^2.1.0",
"vue-i18n": "^6.0.0-alpha.2",
"vue-router": "^2.0.1",```
picture WangShayne
👍6

Most helpful comment

https://github.com/ChangJoo-Park/vue-i18n-error

Here is my repo

in the locales directory, 

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)
Vue.config.lang = 'en'

const locales = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'γ“γ‚“γ«γ‘γ―γ€δΈ–η•Œ'
    }
  },
  ko: {
    message: {
      hello: 'μ•ˆλ…•ν•˜μ„Έμš”'
    }
  }
}
// !!!: Vue-i18n은 vue-router 이전에 μ •μ˜ λ˜μ–΄ μžˆμ–΄μ•Όν•¨
// TODO: VueI18n λ‹€λ₯Έ 파일둜 이동
Object.keys(locales).forEach(lang => {
  Vue.locale(lang, locales[lang])
})

Error message

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_1_vue__.default.locale is not a function
    at eval (eval at <anonymous> (http://localhost:8080/app.js:1142:1), <anonymous>:32:48)
    at Array.forEach (native)
    at eval (eval at <anonymous> (http://localhost:8080/app.js:1142:1), <anonymous>:31:84)
    at Object.<anonymous> (http://localhost:8080/app.js:1142:1)
    at __webpack_require__ (http://localhost:8080/app.js:660:30)
    at fn (http://localhost:8080/app.js:84:20)
    at eval (eval at <anonymous> (http://localhost:8080/app.js:1163:1), <anonymous>:2:67)
    at Object.<anonymous> (http://localhost:8080/app.js:1163:1)
    at __webpack_require__ (http://localhost:8080/app.js:660:30)
    at fn (http://localhost:8080/app.js:84:20)

Is this Webpack issue?

picture ChangJoo-Park on 21 Mar 2017
👍2

All 57 comments

Same issue here

gary149 picture gary149 on 3 Mar 2017

Same issue

ghost picture ghost on 5 Mar 2017

@WangShayne
Sorry, for replying for late.
Hmm πŸ€” , I cannot debug with your issue reporting.
Could you provide the minimum reproduction repo please?

kazupon picture kazupon on 5 Mar 2017

@kazupon
Thanks for you replay.
Sorry,because the project is urgent,I change the plugin to vuex-i18n.
When I first used "npm run dev", the project was running normally, but I did not know when to start, when I switch the path, it will prompt this error.

@gary149 @groundc
Can you provide more useful information?thanks

WangShayne picture WangShayne on 5 Mar 2017

@kazupon
same issue here.

It looks like when using Vue.use(VueI18n).

It doesn't load for Vue。So Vue don't have the methods defined in VueI18n.

CommanderXL picture CommanderXL on 5 Mar 2017

I have a minimum repo:

https://github.com/CommanderXL/x-blog

branch: i18n

CommanderXL picture CommanderXL on 5 Mar 2017

@kazupon
same issue here.

sunyouwei picture sunyouwei on 6 Mar 2017

@kazupon
same issue here.

lauer3912 picture lauer3912 on 6 Mar 2017

@kazupon
"dependencies": { "vue": "^2.2.1", "vue-i18n": "^6.0.0-alpha.2", "vue-router": "^2.3.0" },

lauer3912 picture lauer3912 on 6 Mar 2017

Hmm πŸ€” , I tried to reproduce the below repo, but I could not repdocuce it. 😞
https://github.com/kazupon/vue-i18n-alpha-repro

@WangShayne

when I switch the path

Would you tell me the detail it?

@CommanderXL
Thanks for your reproduction repo!
However, I could not found i18n branch in your repo.
Could you push i18n branch to it?

kazupon picture kazupon on 6 Mar 2017

@kazupon Well. You can use master branch. I just push the code.

CommanderXL picture CommanderXL on 6 Mar 2017

@CommanderXL
Thank you for your pushing!
In you latest commits of master branch, I didn't found vue-i18n dependencies. 😞
https://github.com/CommanderXL/x-blog/commit/dc96765af5e28b7b0601caa1971d4ad30298928b

Where your implementation with vue-i18n ?

kazupon picture kazupon on 6 Mar 2017

@kazupon Well. You can install the npm package.json in your local. Then npm run dev

Well. In your demo:
https://github.com/kazupon/vue-i18n-alpha-repro

It works well.

As I see, the demo config file is different with the config file https://kazupon.github.io/vue-i18n/started.html showed on the gitbook.

So I think you should update the wiki in the gitbook.

CommanderXL picture CommanderXL on 6 Mar 2017

@CommanderXL
Well, I still could not publish documentation for v6.0.0-alpha.
I’m working on it for official v6.0.0

If you want to check vue-i18n v6.0.0-alpha, you need to refer the examples

kazupon picture kazupon on 6 Mar 2017

Hi I had the same problem and it was a problem with vuejs-devtools
https://github.com/vuejs/vue-devtools/issues/271
I fixed it by adding an empty computed object to my component.
Edit: That did not fix it as I originally thought, but if I disable vuejs-devtools the problem goes away.

Teddy-Schmitz picture Teddy-Schmitz on 6 Mar 2017

The alpha release seems to be tagged on the wrong commit :

And the vue 2.2 compatibility fix is in https://github.com/kazupon/vue-i18n/commit/5e7bf5e2fa4a52923116c6d172d49632f303523d which is also ahead of the release commit

abellion picture abellion on 6 Mar 2017

@kazupon
Please check this demo
https://github.com/WangShayne/debugForVue-i18n

and

when I switch the path

I recorded a gif,hope to useful
1

WangShayne picture WangShayne on 7 Mar 2017

@WangShayne
Thank you very much :bow:
I'll try to check and reproduce your repo.

kazupon picture kazupon on 7 Mar 2017

@WangShayne
I could not reproduce your repo... 😞

I release v6.0.0-alpha.3, and add debug info & improvement.
https://github.com/kazupon/vue-i18n/releases/tag/v6.0.0-alpha.3

Could you try it please?

kazupon picture kazupon on 8 Mar 2017

i still getting the same issue with v6.0.0-alpha.3, using vue 2.2.1

locale is not a function

vhuerta picture vhuerta on 8 Mar 2017

@kazupon
I have a new issue with v6.0.0-alpha.3
Failed in $t due to not find VueI18n instance

2

WangShayne picture WangShayne on 8 Mar 2017

app.js
import i18n from './i18n/index.js' new Vue({ ..., i18n })

i18n/index.js

`
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

export default new VueI18n({
locale: "en",
messages: {
"en": {
"message": {
"hello": "hello world"
}
}
},
"ja":{
"message": {
"hello": "γ“γ‚“γ«γ‘γ―γ€δΈ–η•Œ"
}
}
})
`

example
@vhuerta

DWYW picture DWYW on 8 Mar 2017

@DWYW thanks for the example, i tried this and now is working like a charm, i was trying with the previous version.

Regards

vhuerta picture vhuerta on 8 Mar 2017

@WangShayne
I have one additional request. πŸ™
Could you provide node_modules version (vue/vue-router/vuex/vue-loader/vue-template-compiler...) with the below command please?

$ npm ls --depth=0
kazupon picture kazupon on 9 Mar 2017

@kazupon
Here :sun_with_face:
Hope useful

+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected] extraneous
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

npm ERR! extraneous: [email protected] E:\debugForVue-i18n\node_modules\vuex-router-sync
WangShayne picture WangShayne on 9 Mar 2017
👍1

same issue here....

yunfengsay picture yunfengsay on 9 Mar 2017

Maybe, I have the same issue.

The issue happens when I click a button and it calles vue-router's push function inside of the click event handler. Then vue-i18n raises the Failed in $t due to not find VueI18n instance error. I noticed that the this variable points to the $root Vue instance itself (look at the _name field in right pane of the screen shot. ). I hope it will be helpful for solving the problem. Thanks.

image

vue: 2.2.1
vue-router: 2.3.0
vue-i18n: 6.0.0-alpha.3

h6ah4i picture h6ah4i on 9 Mar 2017

@h6ah4i
Thank you for your reporting! πŸ™‡

kazupon picture kazupon on 10 Mar 2017

@h6ah4i
I have a request. Would you provide the reproducion repos please? πŸ™

kazupon picture kazupon on 10 Mar 2017

@kazupon Sure, but currently I am working on closed source software development, so I will create a small project that can reproduce the issue.

h6ah4i picture h6ah4i on 10 Mar 2017

@h6ah4i
Thank you very much!! 😭

kazupon picture kazupon on 10 Mar 2017

@kazupon just wanted to add that in latest version (after commit 0e4ac39)
changing options.i18n instanceof VueI18n
to: typeName(options.i18n) === 'VueI18n'
in sources produces a bug if used in tandem with uglifyjs or other minification tools.
Name of function is mangled so we get in production something like 'r' === 'VueI18n' ` and end up with undefined this.$i18n

h-collector picture h-collector on 10 Mar 2017

same issue with mangle

messtime picture messtime on 11 Mar 2017

@kazupon Hi. I am now trying to reproduce the issue on my codebase but I cannot reproduce it anymore... I guess restarting webpack-dev-server or yarn install resolved the issue in my case πŸ€”

However, #124 is still able to reproduce. Enabling uglify plugin or using minified version of vue-i18n causes the issue.

h6ah4i picture h6ah4i on 11 Mar 2017

Hi everyone!
Thank you for your cooperation.

I could reproduce this issue.
https://jsfiddle.net/w431Lez7/22/

I'll try to fix.

kazupon picture kazupon on 11 Mar 2017
👍1

I released latest version (v6.0.0-alpha.5)
Please check it.
https://github.com/kazupon/vue-i18n/releases/tag/v6.0.0-alpha.5

kazupon picture kazupon on 12 Mar 2017

Still have this problem when I use the vuex-router-sync

zce picture zce on 12 Mar 2017

@zce
Thank you for your reporting!
Could you provide the reproduction repo please?

kazupon picture kazupon on 12 Mar 2017

@kazupon
use vuex-router-sync with vue-devtools

https://youtu.be/6ldpEnntvEE

zce picture zce on 12 Mar 2017

@kazupon

https://github.com/zce/vue-i18n/commit/e78b77058ba8620da72aaf04c00d73e7874f23f9

zce picture zce on 12 Mar 2017

@kazupon Hi. I have successfully reproduced the bug thanks to @zce 's advice!

https://github.com/h6ah4i/vue-i18n-issue-118-sample

h6ah4i picture h6ah4i on 12 Mar 2017
👍2

@zce @h6ah4i
Thank you for your reproduction repo & info!

I think this is vue-devtools issue.
https://github.com/vuejs/vue-devtools/issues/271

kazupon picture kazupon on 12 Mar 2017

πŸ‘ I think so

zce picture zce on 12 Mar 2017

@kazupon I dont have dev-tools installed, but still I get this issue..

steffanhalv picture steffanhalv on 13 Mar 2017

@steffanhalv
Could you provide the minimum reproduction repo please?

kazupon picture kazupon on 14 Mar 2017

Same here, devTools removed but still get the same error.

import Vue from 'vue'
import VueI18n from 'vue-i18n'
// import all languages
import it from './it.json'
// Setting the base lang
let languages = {
  it: it
}
Vue.use(VueI18n)
Vue.config.lang = 'it'
// set locales
Object.keys(languages).forEach((language) => {
  Vue.locale(language, languages[language])
})
wannymiarelli picture wannymiarelli on 16 Mar 2017

@wannymiarelli
Before the API is deprecated

for 6.x:
https://github.com/kazupon/vue-i18n/blob/dev/examples/started/index.html

zce picture zce on 16 Mar 2017

@zce God sorry didnt notice this one. My bad.

wannymiarelli picture wannymiarelli on 16 Mar 2017

Same here with alpha.6 :cry:

ChangJoo-Park picture ChangJoo-Park on 21 Mar 2017

https://github.com/ChangJoo-Park/vue-i18n-error

Here is my repo

in the locales directory, 

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)
Vue.config.lang = 'en'

const locales = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'γ“γ‚“γ«γ‘γ―γ€δΈ–η•Œ'
    }
  },
  ko: {
    message: {
      hello: 'μ•ˆλ…•ν•˜μ„Έμš”'
    }
  }
}
// !!!: Vue-i18n은 vue-router 이전에 μ •μ˜ λ˜μ–΄ μžˆμ–΄μ•Όν•¨
// TODO: VueI18n λ‹€λ₯Έ 파일둜 이동
Object.keys(locales).forEach(lang => {
  Vue.locale(lang, locales[lang])
})

Error message

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_1_vue__.default.locale is not a function
    at eval (eval at <anonymous> (http://localhost:8080/app.js:1142:1), <anonymous>:32:48)
    at Array.forEach (native)
    at eval (eval at <anonymous> (http://localhost:8080/app.js:1142:1), <anonymous>:31:84)
    at Object.<anonymous> (http://localhost:8080/app.js:1142:1)
    at __webpack_require__ (http://localhost:8080/app.js:660:30)
    at fn (http://localhost:8080/app.js:84:20)
    at eval (eval at <anonymous> (http://localhost:8080/app.js:1163:1), <anonymous>:2:67)
    at Object.<anonymous> (http://localhost:8080/app.js:1163:1)
    at __webpack_require__ (http://localhost:8080/app.js:660:30)
    at fn (http://localhost:8080/app.js:84:20)

Is this Webpack issue?

ChangJoo-Park picture ChangJoo-Park on 21 Mar 2017
👍2

@ChangJoo-Park
Thank you for your reporting and repo providing!
Sorry, my bad.
vue-i18n API is breaking changed!
Please See the docs:
https://kazupon.github.io/vue-i18n/en/

kazupon picture kazupon on 22 Mar 2017
👍1

Released v6.0.0-beta.1
Please check it!
https://github.com/kazupon/vue-i18n/releases/tag/v6.0.0-beta.1

kazupon picture kazupon on 22 Mar 2017
👍1

Thank you @kazupon !!
I tried v6.0.0-beta.1 with my repo https://github.com/ChangJoo-Park/vue-i18n-error

It works well πŸ˜ƒ

ChangJoo-Park picture ChangJoo-Park on 22 Mar 2017

I can still reproduce with 6.0.0-beta.1. @ChangJoo-Park how do you create the i18n instance?

This is how I do:

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const resources = {
  en: require('./resources/en')
};

const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: resources
});

export default i18n;
jeerbl picture jeerbl on 22 Mar 2017

hello @jeerbl please see my repo

https://github.com/ChangJoo-Park/vue-i18n-error

ChangJoo-Park picture ChangJoo-Park on 24 Mar 2017

@ChangJoo-Park in the end, as I am using Vuex, I am now using vuex-i18n.

Thx anyway
Jerome

jeerbl picture jeerbl on 24 Mar 2017

release v6.0.0
https://github.com/kazupon/vue-i18n/releases/tag/v6.0.0

kazupon picture kazupon on 5 Apr 2017
Was this page helpful?
0 / 5 - 0 ratings

Related issues

metalanti picture metalanti  Β·  15Comments
tobeorla picture tobeorla  Β·  18Comments
ndabAP picture ndabAP  Β·  24Comments
qiaochangwei picture qiaochangwei  Β·  16Comments
gmarineau picture gmarineau  Β·  16Comments