Comments (19)
This was my bad
I had
const i18n = new VueI18n({
locale: 'en', // set locale
translations // set locale messages
})
Instead of
const i18n = new VueI18n({
locale: 'en', // set locale
messages: translations // set locale messages
})
from vue-i18n.
I get the same error even if translations are included in the Vue app's assets, but ONLY if there are in the component scope (defined in 'i18n' key of component).
from vue-i18n.
if anyone ends up here again, my issue was that i was translating the key when sending it to a child component's prop, and then, when rendering that prop, i was calling the translation method once again, to a value that was already translated and, of course, had no key.
from vue-i18n.
I'm getting the same warning using Vue 2.0 on a Laravel application and none of the localized strings are displayed...
I'm also using laravel-vue-i18n-generator plugin to get Laravel translation files formatted.
from vue-i18n.
I just try the document code(http://kazupon.github.io/vue-i18n/en/started.html)
But Chrome show me warnning:
vue-i18n.esm.js?ac9a:14 [vue-i18n] Cannot translate the value of keypath 'message.hello'. Use the value of keypath as default.
"vue": "^2.4.2"
"vue-router": "^2.7.0"
"vuex": "^2.4.1"
"vue-i18n": "^7.3.1"
from vue-i18n.
This was closed a while ago but I came upon this issue on my frontend setup and found an easy solve.
I lazy load my translations as described in the docs except I don't need a vue router, thus no beforeEach
magic.
But if you take a look at the lazy load example, the language loading method can return a promise (because why not?)
I wait for the promise to resolve to instantiate my vue object.
(async function () {
await loadMessages(my_lazy_loaded_locale)
})().then(() => {
new Vue({
i18n: i18n,
...App
}).$mount('#app')
})
The loadMessages method is defined as follows:
const {locale} = window.config
const i18n = new VueI18n({
locale: locale,
fallbackLocale: locale,
messages: {}
})
export async function loadMessages () {
const messages = await import(/* webpackChunkName: "lang-[request]" */ `../lang/${locale}`)
i18n.setLocaleMessage(locale, messages)
return Promise.resolve(locale)
}
A big arigato for all the hard work, @kazupon!
頑張って、ね
from vue-i18n.
this is like the page loads before the translated string is parsed.
from vue-i18n.
In webpack.config.js, add such alias setting.
resolve: {
alias: {
'vue': 'vue/dist/vue.js'
}
},
And import Vue 2.0 from 'vue', do not use 'vue/dist/vue'.
import Vue from 'vue'
Then restart dev server, everything works.
If vue-router 2.0 is used, the alias setting is necessary.
vue-i18n is OK, but vue-router sucks.
vuex 2.0 have the same problem too.
from vue-i18n.
It seems I get the same problem.
I have this problem too.
Versions
{
"vue": "2.0.0-rc.8",
"vue-resource": "1.0.3",
"vue-router": "^2.0.0-rc.7"
}
Repo
https://github.com/erguotou520/dashboard
Step to reproduce
- Follow the readme to setup the project
- Type anything in the login page to get logged(Ignore the chinese text)
- Open the console, you can see the errors
index.js:3 Uncaught TypeError: Cannot read property 'indexPath' of undefined
from vue-i18n.
It seems that reproduce only on windows, my Mac don't shows any error, need to confirm on windows again.
from vue-i18n.
@erguotou520
Thank you for your feedback. :)
from vue-i18n.
@francoisromain I have the same problem . I agree with "this is like the page loads before the translated string is parsed."
when i open the module , the translated string appears at once , but there is some warnings in the console.
is there a method to solve this problem or just don't care?
from vue-i18n.
Hello,
It seems that I have the same issue here. The translation is loaded via an API and I can see in logs that the vue components are parsed before the translation, so that's why it generates these warnings.
Once the translation is loaded and the Vue.config.lang set, then correct translations are displayed.
"vue": "^2.0.1",
"vue-i18n": "^4.10.0",
"vue-resource": "^1.0.3",
"vue-router": "^2.0.3",
"vuex": "^2.0.0"
Vue.locale(lang, function () {
return new Promise((resolve, reject) => {
// Fetch online translations
Vue.http.get(endpoint + 'translation/florapos/' + lang).then(
(response) => {
if (response.body && response.body.hasOwnProperty(lang)) {
console.log('set locale', response.body)
// Return the locale json
resolve(response.body[lang])
Vue.config.lang = lang
}
else {
console.log('Locale ' + lang + ' is not available')
reject()
}
},
(response) => {
console.log('Error during the tranlation loading')
reject()
}
)
})
})
from vue-i18n.
I make it happy by placing the language set codes into beforeCreate hook in your Vue obejct
from vue-i18n.
Getting the same issue here
from vue-i18n.
In case that our case could help to someone to solve the same problem.
We got this issue a few months ago and today I found the solution. In summary we have a medium size application which has a root locales passed to the VueI18n
constructor with the property messages
as commented in #49 (comment)
We also have locales defined in the components which are children of the root component (called App component); at some point, we don't remember exactly in what change, we observed that the components failed to reference the root messages locales, though they referenced without any issue their local locales.
So basically we had a similar or the same problem expressed in some comments of this issue.
Several times, I checked the options properties, messages
, fallbackRoot
, etc., an even set different values in some of them (e.g. fallbackRoot
), but I didn't solve the issue.
Today, just adding the @kazupon/vue-i18n-loader
in order to be able to use the custom blocks and if for any chance, the problem could be fixed if we change our i18n
component properties by the <i18n>
blocks, I found the issue (maybe it's a workaround). The loader didn't solve the issue, so it doesn't matter if you use or not, but it led me to take a look to the example of setting and using the vue-i18n-loader https://github.com/kazupon/vue-i18n/tree/dev/examples/sfc
In that example I found that the App component is added to Vue as a result of the render
function](
vue-i18n/examples/sfc/src/main.js
Line 18 in 894be36
new Vue({
i18n,
el: '#app',
...App
})
by using the render
function and the problem was gone.
Last but not least, I found that once I did that, I've seen that the missing
handler was called for each component page (we use vue-router
) at the first load with the {lang}.{pagename}
(e.g. 'en.user) but, swapping
fallbackRootfrom
trueto
falsethe
missing` handler isn't called with those anymore.
from vue-i18n.
Hello, @ifraixedes @kazupon I tried all, rendering with render callback, rewriting the code, clearing up the base and have the same problem as above. It always falls back to default language for some keys, its all random, no reason for it to not work. Any idea how to fix this? Thanks!
from vue-i18n.
@CodeSkills I don't have it; this issue is very annoying and there is no reason as you stated, I found that what was exposed worked for us, but it was after a lot of back and forth changing things, etc.
In my opinion is an important issue, however it looks that the issue only exist for some not for all.
from vue-i18n.
close due to in-activity
from vue-i18n.
Related Issues (20)
- Fallback when value is undefined.
- [Vue3, Vite] Error if string value contain HTML and special characters HOT 3
- Parsing of language file fails when using functions HOT 1
- How to use component interpolation for array (multiple) translations
- Returning an Empty String for Undefined Keys in Vue-i18n HOT 1
- Use pluralization in component interpolation.
- The safari browser does not show words correctly when a language is switched.
- YAML parser doesn't process valid YAML HOT 1
- [v9.8.0] Suppressing automatic locale fallback with `!` breaks `n`/`$n` number formatting HOT 1
- Reuse of international fields
- Avoid duplicate code for `numberFormats` and `dateTimeFormats `
- Avaliblity to set `keySeperator`
- Dynamic currency
- 语言包在线修改
- Fallback formatting fails when key is not defined in fallback translation
- [vue-i18n] Cannot find VueI18n instance!
- Hyphens in placeholders causing error `Unterminated closing brace` in vue-i18n@9 HOT 1
- Uncaught (in promise) SyntaxError: Must be called at the top of a `setup` function
- Keys containing __proto__ are handled inconsistently
- Keys containing 'toString' may have surprising results
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-i18n.