i18next::translator: missingKey tr translation CONTACT CONTACT #185
Description
I'm doing the same configuration on this page : https://www.gatsbyjs.com/plugins/gatsby-plugin-react-i18next/ and getting this error messages. Translation is not working. What I am doing wrong?
Here is the directory tree that I have.
| - locales
| - - - tr
| - - - - - translation.json
| - - - en
| - - - - - translation.json
| - src
| - gatsby.config
| - package.json
i18next::translator: missingKey tr translation SCENARIO_DEV SCENARIO_DEV
functions.tsx:65 i18next::translator: missingKey tr translation SCENARIO_DEV_TEXT SCENARIO_DEV_TEXT
functions.tsx:79 i18next::translator: missingKey tr translation DIGITAL_INPUTS DIGITAL_INPUTS
functions.tsx:80 i18next::translator: missingKey tr translation DIGITAL_INPUTS_TEXT DIGITAL_INPUTS_TEXT
Here is package.json
{
"name": "kbox-weble",
"version": "1.0.0",
"private": true,
"description": "kbox-weble",
"author": "Kervan Aslan",
"keywords": [
"gatsby"
],
"scripts": {
"develop": "cp lib/* public/ && gatsby develop",
"start": "gatsby develop",
"build": "gatsby build",
"serve": "gatsby serve",
"clean": "gatsby clean",
"typecheck": "tsc --noEmit"
},
"dependencies": {
"@deckdeckgo/highlight-code": "^4.4.0",
"@headlessui/react": "^1.7.18",
"@heroicons/react": "^2.1.1",
"@mdx-js/react": "^3.0.1",
"assert": "^2.1.0",
"autoprefixer": "^10.4.17",
"axios": "^1.6.7",
"bootstrap": "^5.3.3",
"browserify-zlib": "^0.2.0",
"gatsby": "^5.13.1",
"gatsby-plugin-google-tagmanager": "^5.13.1",
"gatsby-plugin-image": "^3.13.0",
"gatsby-plugin-manifest": "^5.13.0",
"gatsby-plugin-mdx": "^5.13.1",
"gatsby-plugin-postcss": "^6.13.0",
"gatsby-plugin-react-i18next": "3.0.1",
"gatsby-plugin-sharp": "^5.13.0",
"gatsby-plugin-sitemap": "^6.13.0",
"gatsby-remark-images": "^7.13.1",
"gatsby-remark-prismjs": "^7.13.1",
"gatsby-remark-relative-images-v2": "^0.1.5",
"gatsby-source-filesystem": "^5.13.1",
"gatsby-transformer-remark": "^6.13.1",
"gatsby-transformer-sharp": "^5.13.0",
"install": "^0.13.0",
"npm": "^10.9.2",
"postcss": "^8.4.33",
"prismjs": "^1.29.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-helmet": "^6.1.0",
"react-i18next": "^15.1.3",
"stream-browserify": "^3.0.0"
},
"devDependencies": {
"@types/node": "^20.10.6",
"@types/react": "^18.2.46",
"@types/react-dom": "^18.2.18",
"typescript": "^5.3.3"
}
}
gatsby.config
...
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/locales`,
name: `locale`,
},
},
{
resolve: "gatsby-plugin-react-i18next",
options: {
redirect: false,
path: `${__dirname}/locales`,
//localeJsonSourceName: `locale`, // name given to `gatsby-source-filesystem` plugin.
languages: ["tr", "en"],
defaultLanguage: "tr",
siteUrl: "https://kboxsolutions.com",
// if you are using trailingSlash gatsby config include it here, as well (the default is 'always')
trailingSlash: "always",
// you can pass any i18next options
i18nextOptions: {
lowerCaseLng: true,
saveMissing: false,
debug: true,
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
},
keySeparator: ".",
nsSeparator: false,
},
pages: [
{
matchPath: "/",
getLanguageFromPath: false,
languages: ["tr", "en"],
},
{
matchPath: "/contact",
getLanguageFromPath: false,
languages: ["tr", "en"],
},
{
matchPath: "/:lang?/product/:uid",
getLanguageFromPath: true,
excludeLanguages: ["tr", "en"],
},
],
},
},
],
...
cpmponent.tsx
import React, { Component } from "react";
import { Link } from "gatsby";
import Banner from "../images/11.png";
import { useTranslation } from "react-i18next";
const AboutV3: React.FC<any> = (props) => {
const { t } = useTranslation(); // not passing any namespace will use the defaultNS (by default set to 'translation')
return (
<div className="ltn__about-us-area pt-115 pb-100 ">
<div className="container">
<div className="row">
<div className="col-lg-6 align-self-center">
<div className="about-us-img-wrap about-img-left">
<img src={Banner} alt="About Us Image" />
</div>
</div>
<div className="col-lg-6 align-self-center">
<div className="about-us-info-wrap">
<div className="section-title-area ltn__section-title-2--- mb-30">
<h6 className="section-subtitle section-subtitle-2--- ltn__secondary-color">
{t("ABOUT_US")}
</h6>
<h1 className="section-title">{t("RELIABLE_CHOICE")}</h1>
<p>{t("RELIABLE_CHOICE_TEXT")} </p>
</div>
<div className="ltn__feature-item ltn__feature-item-3">
<div className="ltn__feature-icon">
<span>
<i className="fa-solid fa-microchip" />
</span>
</div>
<div className="ltn__feature-info">
<h4>{t("ADVANCED_TECH")}</h4>
<p>{t("ADVANCED_TECH_TEXT")} </p>
</div>
</div>
<div className="ltn__feature-item ltn__feature-item-3">
<div className="ltn__feature-icon">
<span>
<i className="flaticon-call-center-agent" />
</span>
</div>
<div className="ltn__feature-info">
<h4>{t("ALWAYS_BY_YOUR_SIDE")}</h4>
<p>{t("ALWAYS_BY_YOUR_SIDE_TEXT")}</p>
</div>
</div>
<div className="ltn__feature-item ltn__feature-item-3">
<div className="ltn__feature-icon">
<span>
<i className="fa-solid fa-medal" />
</span>
</div>
<div className="ltn__feature-info">
<h4>{t("EXPERTISE_TRUST_QUALITY")}</h4>
<p>{t("EXPERTISE_TRUST_QUALITY_TEXT")}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default AboutV3;