Cannot translate the value of keypath

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.

[bonekost]

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

[RaymondAtivie]

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