Google Cloud: react-i18next not loading json translation files in React app

Question

I have the same problem as described here (stack overflow question) except I have both of my items configured properly.

my i18n.js configuration is setup as follows.

import i18n from 'i18next';
import Backend from 'i18next-xhr-backend';
import { reactI18nextModule } from 'react-i18next';

i18n
  .use(Backend)
  .use(reactI18nextModule)
  .init({
        interpolation: {
            // React already does escaping
            escapeValue: false
        },
        lng: 'en',
      fallbackLng: 'en',
      backend: {
        loadPath: '/locales/{{lng}}/translation.json',
        allowMultiLoading: true
      },
      debug: true,
      react: {
        wait: true
      }
  });

export default i18n;

I'm getting this error i18next::backendConnector: loading namespace translation for language en failed failed parsing locales/en/translation.json to json

I made sure that my locales directory is in my public directory. I also verified that post npm run build the locales directory is copied over to the build directory.

In my staging environment I open the Network tab on Chrome Dev Tools and open translations.json in a new tab. I am taken to the correct url https://example.com/locales/en/translation.json however I am redirected to my index.html

Answer 1

In App Engine Standard, you require a handler in your app.yaml configuration file that associate an URL pattern to the static files uploaded. You would use regex to define the extension files that would be considered as static file in the path specified for static files.

eg. from app.yaml configuration for static files in App Engine Standard.

handlers: - url: /(.*\.(gif|png|jpg))$ static_files: static/\1 upload: static/.*\.(gif|png|jpg)$

where,

url = URL pattern that will be treated as paths to static files.
static_files = path of the static files.
upload = regex that matches the file paths for all files that will be referenced by this handler when deploying the application.