title: i18next - " WebpackError: TypeError: namespaces.forEach is not a function" (hooks)
body: <p>I'm trying to get <code>i18next</code> to work in my Gatsby project but I keep running into the below error whenever i try to build using <code>yarn build</code>.</p>
  <p>From my <code>package.json</code>:</p>
  <pre class="lang-json prettyprint-override"><code>&quot;i18next&quot;: &quot;^19.8.2&quot;,
  &quot;react-i18next&quot;: &quot;^11.7.3&quot;,
  </code></pre>
  <p>My <code>i18n/index.js</code> file:</p>
  <pre class="lang-js prettyprint-override"><code>import i18n from 'i18next';
  import { initReactI18next } from 'react-i18next';
  // ...
  
  i18n.use(initReactI18next).init({
    fallbackLng: &quot;en&quot;,
    // have a common namespace used around the full app
    ns: [&quot;translations&quot;],
    defaultNS: &quot;translations&quot;,
    wait: true,
    useSuspense: false
  }, (err, t) =&gt; {
    i18n.t('en');
  });
  
  // load additional namespaces after initialization
  i18n.loadNamespaces('translations', (err, t) =&gt; {
    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) =&gt; {
    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) =&gt; {
    getI18nResourceBundles(resource);
  });
  
  // i18n resource bundles for components
  i18nResourceBundlesComponents.forEach((resource) =&gt; {
    getI18nResourceBundles(resource);
  });
  
  export default i18n;
  </code></pre>
  <p>The full error message after <code>yarn build</code></p>
  <pre class="lang-sh prettyprint-override"><code>❯ 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 &quot;/404/&quot;
  
  See our docs page for more info on this error: https://gatsby.dev/debug-html
  
  
    37 |       var _this = this;
    38 |
  &gt; 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.
  </code></pre>
  <p>In my <code>Footer/index.jsx</code> where the error originally occurs (line 27):</p>
  <pre class="lang-js prettyprint-override"><code>const { t, i18n } = useTranslation({useSuspense: false});
  </code></pre>
  <p>Any help would be greatly appreciated. Thank you</p>