Gatsby: Problems to find locales during build process - building i18n with gatsby

Created on 29 Mar 2018 · 6Comments · Source: gatsbyjs/gatsby

Description

Hey folks!

I'm having problems to generate the production files, seems that my app isn't finding the locales.

After review my code and follow exactly the last post about building i18n with gatsby I'm still having problems.

When I ran "gatsby build" the follow message is presented during the "Building static HTML for pages" step:

i18next::backendConnector: loading namespace translation for language en failed failed parsing /locales/en/translation.json to json
[...The same message repeats to all my declared namespaces]
i18next: languageChanged en
i18next: initialized { debug: true,
  initImmediate: true,
  ns:
   [ 'translation',
       ...
    ],
  defaultNS: [ 'translation' ],
  fallbackLng: [ 'en' ],
  fallbackNS: false,
  whitelist: [ 'en', 'pt', 'cimode' ],
  nonExplicitWhitelist: false,
  load: 'all',
  preload: false,
  simplifyPluralSuffix: true,
  keySeparator: '.',
  nsSeparator: ':',
  pluralSeparator: '_',
  contextSeparator: '_',
  saveMissing: false,
  updateMissing: false,
  saveMissingTo: 'fallback',
  saveMissingPlurals: true,
  missingKeyHandler: false,
  postProcess: false,
  returnNull: true,
  returnEmptyString: true,
  returnObjects: false,
  joinArrays: false,
  returnedObjectHandler: [Function: returnedObjectHandler],
  parseMissingKeyHandler: false,
  appendNamespaceToMissingKey: false,
  appendNamespaceToCIMode: false,
  overloadTranslationOptionHandler: [Function: handle],
  interpolation: { escapeValue: false },
  react: { wait: true } }
success Building static HTML for pages — 10.147 s

To avoid "ReferenceError: XMLHttpRequest is not defined" error (#252) I add on my gatsby-node the follow line:
global.XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;

The application works perfectly in develop mode, but if I ran gatsby serve after my build I've got this message on my browser console:

I18n.js:56 Uncaught TypeError: Cannot read property 'options' of undefined
    at new t (I18n.js:56)
    at constructClassInstance (react-dom.production.min.js:109)
    at beginWork (react-dom.production.min.js:133)

Do you guys have any suggestion about how I can fix it?

Environment

Gatsby version: 1.9.243
gatsby-cli version: 1.1.10
Node.js version: v8.7.0
Operating System: OS X

Source

flavioalves

All 6 comments

I got it! =)

We need use the I18nextProvider wrapping the layout template. So I did something like:

import React from 'react'
import { I18nextProvider } from 'react-i18next'
import i18n from '../components/i18n'

const DefaultLayout = ({ children, location }) => (
  <I18nextProvider i18n={i18n}>
    <div className="layout">
      {children()}
    </div>
  </I18nextProvider>
)

export default DefaultLayout

flavioalves on 29 Mar 2018

Is working but I still not understanding why we are getting the message loading namespace translation for language en failed failed parsing ... during the build. If someone have a guess about it, will be nice to know before close the issue.

flavioalves on 29 Mar 2018

👍1

Exact same issue here @flavioalves

rafaelderolez on 4 Jun 2018

I'm having the same problem as @flavioalves. I'm trying to integrate i18n into my gatsby site without luck. I followed all the steps detailed in the gatsby blog.
Adding the XMLHttpRequest polyfill seems like a hack to me.

rodrigobdz on 7 Jul 2018

dont know if this is of any help, but i tried following the guide but it didnt quite work, and it did not generate SSR html code on build so i made a starter after i got it working, hopefully it will help some of you https://github.com/jb-san/gatsby-starter-i18next