New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot translate the value of keypath #206

Closed
ekampp opened this Issue Aug 9, 2017 · 10 comments

Comments

Projects
None yet
7 participants
@ekampp
Copy link

ekampp commented Aug 9, 2017

vue & vue-i18n version

"dependencies": {
  "vue": "^2.3.3",
  "vue-i18n": "^7.1.1",
  "vue-router": "^2.6.0"
},

Reproduction Link

I'm unable to figur eout how to make JS fiddle handle the webpack compilation of the .vue file that I'm having problems with, so reproduction link is omitted.

Steps to reproduce

I followed the setup here: http://kazupon.github.io/vue-i18n/en/sfc.html

# vue-loader
  modules: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          preLoaders: {
            i18n: 'yaml-loader'
          },
          loaders: {
            i18n: '@kazupon/vue-i18n-loader'
          }
        }
      }
    ]
  }
# main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import App from './App';
import router from './router';

Vue.config.productionTip = false;

Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: 'en',
});

/* eslint-disable no-new */
window.app = new Vue({
  i18n,
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
});
# app.vue
<template>
  <div id="glitnr-client-app">
    <top-menu></top-menu>
    <router-view></router-view>
  </div>
</template>

<script>
import TopMenu from '@/components/menu';

export default {
  name: 'client-app',

  data() {
    return {
      title: 'Client',
    };
  },

  components: {
    TopMenu,
  },
};
</script>
# menu.vue
<i18n>
en:
  signIn: Sign in
</i18n>

<template>
  <div class="menu">
    <a v-on:click="visible = !visible" v-bind:class="{ visible: visible }" class="toggle">
      <i class="fa fa-bars"></i>
    </a>

    <nav id="right-menu" v-show="visible" v-bind:class="{ visible: visible }">
      <a href="#">{{ $t('signIn') }}</a>
    </nav>
  </div>
</template>

<script>
export default {
  name: 'top-menu',

  data() {
    return {
      visible: false,
    };
  },
};
</script>

What is Expected?

I would expect the content of the menu nav link to be Sign in.

What is actually happening?

The content of the link is actually signIn, and the console contains the following:

[vue-i18n] Cannot translate the value of keypath 'signIn'. Use the value of keypath as default.
warn @ vue-i18n.esm.js?ac9a:14
_warnDefault @ vue-i18n.esm.js?ac9a:889
_t @ vue-i18n.esm.js?ac9a:1054
Vue.$t @ vue-i18n.esm.js?ac9a:141
render @ menu.vue?87ee:33
Vue._render @ vue.esm.js?65d7:4128
updateComponent @ vue.esm.js?65d7:2538
get @ vue.esm.js?65d7:2881
Watcher @ vue.esm.js?65d7:2870
mountComponent @ vue.esm.js?65d7:2542
Vue$3.$mount @ vue.esm.js?65d7:7863
Vue$3.$mount @ vue.esm.js?65d7:10066
init @ vue.esm.js?65d7:3501
createComponent @ vue.esm.js?65d7:5147
createElm @ vue.esm.js?65d7:5090
createChildren @ vue.esm.js?65d7:5218
createElm @ vue.esm.js?65d7:5123
patch @ vue.esm.js?65d7:5570
Vue._update @ vue.esm.js?65d7:2414
updateComponent @ vue.esm.js?65d7:2538
get @ vue.esm.js?65d7:2881
Watcher @ vue.esm.js?65d7:2870
mountComponent @ vue.esm.js?65d7:2542
Vue$3.$mount @ vue.esm.js?65d7:7863
Vue$3.$mount @ vue.esm.js?65d7:10066
init @ vue.esm.js?65d7:3501
createComponent @ vue.esm.js?65d7:5147
createElm @ vue.esm.js?65d7:5090
patch @ vue.esm.js?65d7:5606
Vue._update @ vue.esm.js?65d7:2414
updateComponent @ vue.esm.js?65d7:2538
get @ vue.esm.js?65d7:2881
Watcher @ vue.esm.js?65d7:2870
mountComponent @ vue.esm.js?65d7:2542
Vue$3.$mount @ vue.esm.js?65d7:7863
Vue$3.$mount @ vue.esm.js?65d7:10066
Vue._init @ vue.esm.js?65d7:4236
Vue$3 @ vue.esm.js?65d7:4321
(anonymous) @ main.js?1c90:16
(anonymous) @ app.js:778
__webpack_require__ @ app.js:660
fn @ app.js:86
(anonymous) @ app.js:989
__webpack_require__ @ app.js:660
(anonymous) @ app.js:709
(anonymous) @ app.js:712

Additional notes

I have looked up other keypath-related bugs, but most of them is about the 5.x version. And I'm unsure about how to debug this setup -- e.g. how to check which translations have been loaded and so on.

Any help is greatly appreciated. Thanks.

@kazupon

This comment has been minimized.

Copy link
Owner

kazupon commented Aug 10, 2017

Thank you for your reporting!
Could you provide the minimum repdo repo please?

@ekampp

This comment has been minimized.

Copy link
Author

ekampp commented Aug 11, 2017

Hi @kazupon, do you know of a good way to have something like jsfiddle to parse the .vue files? This is my first Vue project using webpack, so I purposefully omitted that step because I basically don't know how.

@kazupon

This comment has been minimized.

Copy link
Owner

kazupon commented Aug 13, 2017

Unfortunately, jsfiddle can not parse .vue. currently, I don't know the services that can host .vue files. So, we need to provide with GitHub repo.

@ekampp

This comment has been minimized.

Copy link
Author

ekampp commented Aug 14, 2017

All right, that I can work on. I will look into that soon. Thanks for your help 👍

@chocochaii

This comment has been minimized.

Copy link

chocochaii commented Aug 23, 2017

Hi @ekampp I faced to the same problem as you. I have tried many ways to make this work and now I can fix it.

I set up i18n the same way as you did and I found that this.$i18 is undefined on my project
(You can try console.log(this) then you will see it has or not).

So I did research and found that in there is no type $i18 specified for the project.

Then I checked out the examples/sfc from this repo and when run npm install, I found that there was a folder named "types" in node_modules/vue-i18n but mine didn't have.

So, please check your node_modules/vue-i18n that it contains these following folders,

- decls
- dist
- src
- types << especially this one *

If you don't have them, it can be related to problem you have.

And I found that just running npm update is not enough to get these folders.

You can try the following steps,

  1. Delete vue-i18n from package.json
  2. Delete node_modules
  3. Run npm install
  4. Run npm install vue-i18n --save
  5. Check the folders.

Hopefully it can help you.
Cheers! 😄

@sethmurphy18

This comment has been minimized.

Copy link

sethmurphy18 commented Aug 27, 2017

I have found one thing that can cause the issue. If you set your locale to say navigator.language and then try to fallback on one of your predefined locales. You can run into an issue with an unsupported locale. For example, my navigator.language returns en_US, but I don't have en_US, but I do have en. Instead of using that, the plugin, just says it can't find the keys.

@itumoraes

This comment has been minimized.

Copy link

itumoraes commented Aug 28, 2017

I had the same problem using the vue-i18n in a Rails/Vue project that uses the webpacker gem.

The solution for me was add the @kazupon/vue-i18n-loader to my dependencies yarn add @kazupon/vue-i18n-loader and then add to my vue.js loader file.

module.exports = {
  test: /.vue$/,
  loader: 'vue-loader',
  options: {
    extractCSS: true,
    loaders: {
      js: 'babel-loader',
      file: 'file-loader',
      scss: 'vue-style-loader!css-loader!postcss-loader!sass-loader',
      sass: 'vue-style-loader!css-loader!postcss-loader!sass-loader?indentedSyntax',
      i18n: '@kazupon/vue-i18n-loader'
    }
  }
}
@ekampp

This comment has been minimized.

Copy link
Author

ekampp commented Sep 1, 2017

I have moved to another translation library, vuex-i18n, which was uch easier to implement. So closing this ticket. Sorry for taking up your time.

@ekampp ekampp closed this Sep 1, 2017

@RaymondAtivie

This comment has been minimized.

Copy link

RaymondAtivie commented Nov 12, 2017

@ekampp just for the record, https://www.webpackbin.com can parse .vue files

@bonekost

This comment has been minimized.

Copy link

bonekost commented Jan 6, 2018

I had same issue and I found out that I got old version of vue-loader (10.3)
You need at least v11.3.
Solution for me was: npm install vue-loader@latest

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment