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

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",```

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 8
  • Comments: 57 (18 by maintainers)

Most upvoted comments

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?

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

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

@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/

Hi everyone! Thank you for your cooperation.

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

I’ll try to fix.

@kazupon Here 🌞 Hope useful

+-- express@4.14.1
+-- extract-text-webpack-plugin@1.0.1
+-- fastclick@1.0.6
+-- file-loader@0.9.0
+-- friendly-errors-webpack-plugin@1.1.3
+-- function-bind@1.1.0
+-- html-webpack-plugin@2.28.0
+-- http-proxy-middleware@0.17.3
+-- inject-loader@2.0.1
+-- json-loader@0.5.4
+-- karma@1.4.1
+-- karma-coverage@1.1.1
+-- karma-mocha@1.3.0
+-- karma-phantomjs-launcher@1.0.2
+-- karma-sinon-chai@1.2.4
+-- karma-sourcemap-loader@0.3.7
+-- karma-spec-reporter@0.0.26
+-- karma-webpack@1.8.1
+-- less@2.7.2
+-- less-loader@2.2.3
+-- lolex@1.5.2
+-- mocha@3.2.0
+-- nightwatch@0.9.12
+-- opn@4.0.2
+-- ora@0.3.0
+-- phantomjs-prebuilt@2.1.14
+-- selenium-server@2.53.1
+-- semver@5.3.0
+-- shelljs@0.7.6
+-- sinon@1.17.7
+-- sinon-chai@2.8.0
+-- url-loader@0.5.7
+-- vue@2.1.10
+-- vue-i18n@6.0.0-alpha.3
+-- vue-loader@10.3.0
+-- vue-router@2.2.0
+-- vue-style-loader@1.0.0
+-- vue-template-compiler@2.1.10
+-- vuex@2.1.2
+-- vuex-router-sync@4.1.2 extraneous
+-- vux@2.1.0-rc.43
+-- vux-loader@1.0.35
+-- webpack@1.14.0
+-- webpack-dev-middleware@1.10.0
+-- webpack-hot-middleware@2.16.1
+-- webpack-merge@0.14.1
`-- yaml-loader@0.4.0

npm ERR! extraneous: vuex-router-sync@4.1.2 E:\debugForVue-i18n\node_modules\vuex-router-sync