Every time I try to translate I get i18next::translator: missingKey es-AR
This is my pug
component.pug
.headersGroup
h2(ng-i18next="{{$ctrl.getFilterTitle()}}")
h3(ng-i18next="landing.name")
I tried to translate in two ways. From the pug file and from the controller.
component.js
getFilterTitle () {
return this.$i18next.t('landing.title')
}
I not even interpolating or anything. Just a basic translation.
es-AR.json
{
"landing": {
"title" : "Filtros",
"name" : "Principales"
}
}
This is my init
window.i18next
.use(window.i18nextXHRBackend);
window.i18next.use(window.i18nextLocalStorageCache);
window.i18next.init({
debug: '!{env}' !== 'production',
lng: config.locale, // If not given, i18n will detect the browser language.
fallbackLng: false,
backend: {
loadPath: '/
myApp/build/i18n/{{lng}}/{{ns}}.json'
},
cache: {
enabled: true,
prefix: 'i18next_experts_',
expirationTime: 7 * 24 * 60 * 60 * 1000,
versions: {}
},
useCookie: false,
useLocalStorage: false
}, function (err, t) {
console.log(err, t);
});
Rather sure you render (call t function) before i18next loaded the translations.
Check the console output...do you get those missing log entries before there is the backend loaded message?
Related
I have an old application and i have micro-frontend structure there. The application was using react-scripts#4 and this version had several vulnerabilities so i decided to upgrade it. While react-scripts#5 is not compatible with webpack#4, i needed to upgrade it too. However, I cannot use output.libraryTarget='system' or output.library.type='system' anymore. If i remove this part then app works but i cannot access micro-frontends. Here is my craco.config file;
import {
BabelOptions,
DevServerOptions,
EsLintOptions,
WebpackOptions,
} from '#craco/craco';
export default {
babel: {
plugins: [['#babel/plugin-proposal-decorators', { legacy: true }]],
} as BabelOptions,
eslint: {
enable: false,
} as EsLintOptions,
webpack: {
configure: (webpackConfig) => {
// use system
webpackConfig.output.libraryTarget = 'system';
delete webpackConfig.optimization;
// adding externals
webpackConfig.externals = [
'#test-app/mf-example',
];
return webpackConfig;
},
} as WebpackOptions,
// Adding Server
devServer: ((devServerConfig) => {
// devServerConfig.injectClient = false;
devServerConfig.proxy = {
...devServerConfig.proxy,
'/mf-example': {
target: process.env.MF_EXAMPLE,
secure: false,
changeOrigin: true,
}
};
return devServerConfig;
}) as DevServerOptions,
};
Btw, the problem is not related to other files or configs so i did not share them.
I'm using i18next for the first time in the project. My app has two languages: swedish(sv) and english(en). What I don't understand is that it for some reason sets en to the default language. For example when a user visits the site for the first time. This is my code:
import LanguageDetector from "i18next-browser-languagedetector";
const options = {
order: ['cookie', 'localStorage', 'sessionStorage', 'navigator', 'htmlTag', 'path', 'subdomain'],
lookupLocalStorage: 'lng'
}
i18next.use(LanguageDetector).use(initReactI18next).init({
interpolation: { escapeValue: false },
detection: options,
fallbackLng: 'sv',
supportedLngs: ['sv', 'en'],
resources: {
en: {
common: common_en
},
sv: {
common: common_sv
},
},
});
As I set fallbackLng: 'sv', the default language should be Swedish, but it's not? When a user visits the site for the first time, i18n sets lng to en in localstorage. Any ideas?
Use this trick in your index.js
if (localStorage.getItem('i18nextLng') === null) {
localStorage.setItem('i18nextLng', 'sv')
}
i18next.use(LanguageDetector)...
Hope this help!
[...] the default language should be Swedish [...]
No, because in your configuration you're taking the navigator into account. If the browser is configured to prefer English, your site will default to English (as it should).
At the moment I'm using react-docgen-typescript-loader to automatically generate docs
Downloads last 30 days: 1.2m
But this plugin is no longer supported and archived: https://github.com/strothj/react-docgen-typescript-loader
Also doesn't work with typescript ^4.3 (https://github.com/styleguidist/react-docgen-typescript/issues/356), because the loader uses the old version of the react-docgen-typescript
Is there any other way to automatically generate docs from TS?
Actually, I didn't notice any difference after deleting react-docgen-typescript-loader and using react-docgen-typescript
https://storybook.js.org/docs/ember/configure/typescript#mainjs-configuration
// .storybook/main.js
module.exports = {
typescript: {
check: false,
checkOptions: {},
reactDocgen: 'react-docgen-typescript',
reactDocgenTypescriptOptions: {
shouldExtractLiteralValuesFromEnum: true,
propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
},
},
};
I'm trying to add customMedia option to my postcss-cssnext features config with importFrom file location, but that doesnt work and I dont have any errors on project build, only final Missing #custom-media definition for '--small-viewport'. The entire rule has been removed from the output. when I'm trying to use the media. How do I debug this?
module.exports = {
plugins: [
require('postcss-import')(),
require('postcss-nested')(),
require('postcss-simple-vars')({
variables: {
...require('./src/ui/variables')
}
}),
require('postcss-cssnext')({
features: {
customProperties: false,
browsers: ['> 0.5%, last 2 versions, Firefox ESR, not dead'],
customMedia: {
importFrom: require('path').join(__dirname, './src/ui/custom-media.css')
}
},
}),
require('cssnano')({
autoprefixer: false,
zindex: false,
reduceIdents: false,
discardComments: { removeAll: true },
discardUnused: { fontFace: false },
colormin: false,
}),
]
};
Okay so as per postcss-custom-media CHANGELOG importFrom was added only in 7.0.0 while my cssnext uses 6.0.0. As CSSNext is deprecated I will switch to postcss-preset-env
you know how to use custom media in postcss-preset-env, they work for me only if you create a custom media in the component and refer to it if I want to take custom media from index.css or vars.css they do not work , with variables everything is fine
I am working on some Backbone based project where i am using i18next for locales.
Following is my app.js code:
/*
This file is used to initialize your application.
*/
require(['i18n','application','handlebars_Helpers'], function(i18n, Application) {
i18n.init({
lng: 'en',
debug: true,
fallbackLng: false,
load:'unspecific',
resGetPath: "locales/__lng__/__ns__.json",
ns: {
namespaces: ['translation']
}
});
(new Application()).initialize();
});
Translation file:
{
"loginModule": {
"signin": "Sign In"
}
}
Following is my helper file:
/**
* Set of generic handlebars helpers
*/
define(['i18n'], function(i18n) {
/**
* This helper provides i18Next in templates
*
*
* Usage: span {{t "my.key" }}
*/
Handlebars.registerHelper('t', function(i18n_key) {
var result = i18n.t(i18n_key);
return new Handlebars.SafeString(result);
});
return Handlebars;
});
When i am loading my page through localhost it shows me following message in console:
currentLng set to: en i18n.js:490
GET http://localhost:8000/locales/en/translation.json?_=1374495189376 404 (Not Found) i18n.js:376
failed loading: locales/en/translation.json
Don't understand what i am missing? or why this error is show?
In which folder do you store translations file? Default behavior for i18n is, that it tries to find localization file in specific path: /locales/{lang-code}/{namespace}.json
If you keep file in root, try to change initialization code to following:
i18n.init({
lang: 'en',
debug: true,
fallbackLng: false,
load:'unspecific',
resGetPath: "__ns__-__lng__.json",
ns: {
namespaces: ['translation'],
defaultNs: 'translation'
}
});
This will try to load file from following url: http://localhost:8000/translation-en.json
Basically, try to check location of translations file, name of translation file and construct 'regGenPath' accordingly, more info can be found in i18n documentation http://i18next.com/node/pages/doc_init.html