Locales loaded, but missing key for namespace error (for all keys)

[prabu-ssb]

I am unable to get any of the translations working -- for all {key} and {ns}, get this error:

[next-translate] "{key}" is missing in current namespace configuration. Try adding "{key}" to the namespace "{ns}".

next: ^12.0.8 next-translate: ^1.3.3

i18n.js

modules.export = {
  locales: ['nb', 'nn', 'en'],
  defaultLocale: 'nb',
  loadLocaleFrom: (lang, ns) =>
    import(`./public/locales/${lang}/${ns}.json`).then((m) => m.default),
  pages: {
    '*': ['common', 'header', 'mainMenu'],
    '/': ['welcome'],

  // some more
  }
}

_app.js

import i18nConfg from '../../i18n';

// MyApp

export default appWithI18n(MyApp, i18nConfig);

pages/index.tsx

const Index = () => {
  const { t } = useTranslation('welcome');
  return (
    <div>
      <div>{t('title')}</div>
      <div>{t('welcomeText')}</div>
    </div>
  );
}

export default Index

public/locales/nb/welcome.json:

{
  "title": "Velkommen",
  "welcomeText": "Dette er din hjemmside"
}

Messages: next-translate - compiled page: / - locale: nb - namespaces: common, header, mainMenu, welcome - used loader: getInitialProps

console error: [next-translate] "welcome:title" is missing in current namespace configuration. Try adding "title" to the namespace "welcome". [next-translate] "welcome:welcomeText" is missing in current namespace configuration. Try adding "welcomeText" to the namespace "welcome".

what am I doing wrong ?

[prabu-ssb]

consequently, when i try to load an array with returnObjects: true i invariably get undefined and {...}.map is not a function error.

[prabu-ssb]

I noticed a message saying I do not need to wrap _app.tsx with appWithI18n as I am using the default webpack loader. So I have removed that now.

I also moved all my translation bundles to /locales/{locale}/{ns}.json. But still get the same error.

i18n.js

module.exports = {
  locales: ['nb', 'nn', 'en'],
  defaultLocale: 'nb',
  pages: {
    '*': ['common', 'header', 'mainMenu'],
    '/': ['welcome'],

    /// more 
  }
}

pages/_app.tsx

const MyApp = ({ Component, PageProps }) => { ... };

export default MyApp;

pages/index.tsx

const Index = () => {
  const { t } = useTranslation('welcome');

  return (
    <div>
      <p>{t('title')}</p>
      <p>{t('welcomeText')}</p>
    </div>
  );
};

locales/nb/welcome.json

{
  "title": "Velkommen",
  "welcomeText": "Dette er din hjemmeside"
}

Console error message: [next-translate] "welcome:title" is missing in current namespace configuration. Try adding "title" to the namespace "welcome". [next-translate] "welcome:welcomeText" is missing in current namespace configuration. Try adding "welcomeText" to the namespace "welcome".

We are blocked by this right now.. will greatly appreciate if someone can help with this.

[djeka07]

Our problem, we have moved from next-i18next was the field "keySeparator" in the config. It defaults to '.' and we hade ':' before. Added the line keySeparator: ':' in the i18.js and then it worked.

We dont use the webpack-loader though, use the provider and loadNamesspaces because we need to set it up in runtime.

Before:

module.exports = {
    defaultLocale: 'en-GB',
    locales: ['en-US', 'en-GB'],
    loadLocaleFrom: (lang, ns) => import(`./locales/${lang}/${ns}.json`).then((m) => m.default),
    pages: {
      '*': ['common', 'label', 'button', 'input'],
      '/': ['search']
    }
};

After:

module.exports = {
    defaultLocale: 'en-GB',
    locales: ['en-US', 'en-GB'],
    loadLocaleFrom: (lang, ns) => import(`./locales/${lang}/${ns}.json`).then((m) => m.default),
    keySeparator: ':',
    pages: {
      '*': ['common', 'label', 'button', 'input'],
      '/': ['search']
    }
};

You dont have any deeper nesting in your example though. Without the loadLocaleFrom but thats probably because we use loadNameSpaces.

_app.tsx

 appWithI18n(MyApp as NextComponentType, {
    ...i18nConfig,
    loader: false,
    skipInitialProps: true,
    loaderName: 'getInitialProps'
  })

Index page:

Index.getInitialProps = wrapper.getInitialPageProps((store) => async ({ query, req, res }) => {
  /// code

  return {
   ...otherprops,
    ...(await loadNamespaces({ locale: currentCulture, pathname: '/' }))
  };
});

[wuifdesign]

having the same problem. if the json file for one of the namespaces is missing all of them will become null.

locales/en/common.json exists locales/en/home.json does not exist

pages: {
    '*': ['common'],
    '/': ['home'],
},

this will end up in:

{"pageProps":{"__lang":"en","__namespaces":{"common":null,"home":null}},"__N_SSG":true}

but instead only home should be null.

[aralroca]

@wuifdesign I guess that changing this catch https://github.com/vinissimus/next-translate/blob/7531ff2c4a53f32a9fb15317e490311c5cf84bf4/src/loadNamespaces.tsx#L51 to line 48 will fix this. Feel free to PR.

[wuifdesign]

@aralroca https://github.com/vinissimus/next-translate/pull/794

[AckonSamuel]

@prabu-ssb Here is how I solved the issued

// i18n.js

module.exports = {
    locales: ['en', 'fr'], // Array with the languages that you want to use
    defaultLocale: 'en', // Default language of your website
    pages: {
        "*": ["common"],
    },
    loader: true,
    logBuild: true,
    loggerEnvironment: "both",
    loadLocaleFrom: (lang, ns) => import(`./public/locales/${lang}/${ns}.json`).then((m) => m.default),
  };

//next.config.mjs

/** @type {import('next').NextConfig} */
import nextTranslate from 'next-translate-plugin';

const nextConfig = nextTranslate({
    webpack: (config, { isServer }) => {
        if (!isServer) {
            config.module.rules.push({
                test: /\.svg$/,
                issuer: /\.(js|ts)x?$/, // Modify this line
                use: ['@svgr/webpack'],
            });
        }
        return config;
    },
});

export default nextConfig;

[yuripourre]

@AckonSamuel works perfectly! Thank you!