i18next - " WebpackError: TypeError: namespaces.forEach is not a function" (hooks)

Question

I'm trying to get i18next to work in my Gatsby project but I keep running into the below error whenever i try to build using yarn build.

From my package.json:

"i18next": "^19.8.2",
"react-i18next": "^11.7.3",

My i18n/index.js file:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
// ...

i18n.use(initReactI18next).init({
  fallbackLng: "en",
  // have a common namespace used around the full app
  ns: ["translations"],
  defaultNS: "translations",
  wait: true,
  useSuspense: false
}, (err, t) => {
  i18n.t('en');
});

// load additional namespaces after initialization
i18n.loadNamespaces('translations', (err, t) => {
  i18n.t('i18n', { lng: 'en' } );
});

// i18n resource bundles for views
const i18nResourceBundlesViews = [
  {
    intro: {
      en: { ...intro.en },
      ja: { ...intro.ja },
    },
  },
  // ...
];

// i18n resource bundles for components
const i18nResourceBundlesComponents = [
  {
    header: {
      en: { ...header.en },
      ja: { ...header.ja },
    },
  },
  {
    footer: {
      en: { ...footer.en },
      ja: { ...footer.ja },
    },
  },
];

// Load i18n resource bundles from each resource object
const getI18nResourceBundles = (resource) => {
  const key = Object.keys(resource)[0];
  const enBundle = resource[key].en;
  const jaBundle = resource[key].ja;
  // English translations
  i18n.addResourceBundle('en', key, enBundle);
  // Japanese translations
  i18n.addResourceBundle('ja', key, jaBundle);
};

// i18n resource bundles for views
i18nResourceBundlesViews.forEach((resource) => {
  getI18nResourceBundles(resource);
});

// i18n resource bundles for components
i18nResourceBundlesComponents.forEach((resource) => {
  getI18nResourceBundles(resource);
});

export default i18n;

The full error message after yarn build

❯ yarn build
yarn run v1.22.5
$ gatsby build
success open and validate gatsby-configs - 0.044s
success load plugins - 0.800s
success onPreInit - 0.016s
success delete html and css files from previous builds - 0.027s
success initialize cache - 0.009s
success copy gatsby files - 0.154s
success onPreBootstrap - 0.020s
success createSchemaCustomization - 0.007s
success source and transform nodes - 1.225s
success building schema - 0.415s
success createPages - 0.021s
success createPagesStatefully - 0.104s
success onPreExtractQueries - 0.002s
success update schema - 0.052s
success extract queries from components - 0.418s
success write out requires - 0.008s
success write out redirect data - 0.005s
warn The icon(./static/favicon/favicon-512.png) you provided to 'gatsby-plugin-manifest' is not square.
The icons we generate will be square and for the best results we recommend you provide a square icon.

success Build manifest and related icons - 0.183s
success onPostBootstrap - 0.192s
⠀
info bootstrap finished - 6.260 s
⠀
warn Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
success Building production JavaScript and CSS bundles - 19.520s
success Rewriting compilation hashes - 0.010s
success run queries - 20.490s - 6/6 0.29/s
failed Building static HTML for pages - 4.770s

 ERROR #95313

Building static HTML failed for path "/404/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  37 |       var _this = this;
  38 |
> 39 |       namespaces.forEach(function (ns) {
     | ^
  40 |         if (!_this.usedNamespaces[ns]) _this.usedNamespaces[ns] = true;
  41 |       });
  42 |     }


  WebpackError: TypeError: namespaces.forEach is not a function

  - context.js:39 ReportNamespaces.addUsedNamespaces
    node_modules/react-i18next/dist/es/context.js:39:1

  - useTranslation.js:41 useTranslation
    node_modules/react-i18next/dist/es/useTranslation.js:41:1

  - index.jsx:27 Footer
    src/components/theme/Footer/index.jsx:27:38


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

In my Footer/index.jsx where the error originally occurs (line 27):

const { t, i18n } = useTranslation({useSuspense: false});

Any help would be greatly appreciated. Thank you

Answer 1

This issue has been resolved.

Reference including the solution: https://github.com/benji011/portfolio.benjaminlo.io/pull/9#issuecomment-707612060

I think I've managed to pinpoint the two issues you were originally having. I've uploaded the fixes I've made, please see if it builds for you. It builds fine for me.

1. React suspense:

i18n appears to use Suspense but this is problematic for Gatsby. See here.

The fix is quite straightforward and I've added it to the config.

2. The i18ncheck statement: ```const i18nCheck = i18n.languages.toLowerCase().includes('en') ||

i18n.languages.toLowerCase().includes('en-');```

This statement is problematic.

There are two variables that contain the languages.

1. language, which I think is the current language, and is set to a string: en

2. languages which is an array of languages. This is set to ['en', 'dev'].

If you want to check for the array languages, then we can't use toLowerCase() like it was used. It will result in an error as we are applying toLowerCase() on the entire array and not an element of the array. toLowerCase() must be used on a string and won't ork on an array. We would have to loop through the array and then apply toLowerCase(). I don't think you were wanting to check the array though as the language, for example 'en', would always be in the array.

Another issue related to this is that i18n might not have the property yet, so we need to check that it has the property first.

The best approach, imo, is to just check the language to see if it is en or en-.

Regarding ESLint and Prettier:

You should use both.

ESLint is a linter and will show code errors. The project already has an ESLint config, you just need the plugin. There might be a window that pops up when you open the project, which you must then choose Allow.

Prettier is a formatter and will format your code e.g. split up a long line into 3 separate lines