Express React i18n: Cannot GET /locales/resources.json (JS / TS / Node)

Issue

I am working on a React app with NodeJS backend. As Middleware I was using Koa before, now I did switch to ExpressJS.

I need to adjust the i18n translations to Express.
I did everything like explained in the documentation, but nevertheless I receive the following error when querying for my .json files:
"Cannot GET /locales/resources.json"

I don’t even set this files to this path.
My translations are saved under i.e:
"packages/backend/src/i18n/de-DE/common.json"
=> "packages/backend/src/i18n/languageTag/common.json"

Here is my router.ts:

import * as Express from 'express';
import documentRouter from './documentRouter';
import pdfRouter from './pdfRouter';
import debugRouter from './debugRouter';
import * as i18next from 'i18next';
// @ts-ignore
import * as Backend from 'i18next-node-fs-backend';
// @ts-ignore
import middleware from 'i18next-express-middleware';


// @ts-ignore
i18next.use(Backend)
  .use(middleware.LanguageDetector)
  .init({
    initImmediate: false,
    backend: {
      // translation resources
      loadPath: __dirname + '../i18n/{{lng}}/{{ns}}.json'
      // addPath: __dirname, '../i18n/{{lng}}/{{ns}}.missing.json'
    },
    preload: ['en-US', 'en-GB', 'de-DE', 'fr-FR'],
    fallbackLng: 'de-DE',
  });

const app = Express();

// @ts-ignore
app.use(middleware.handle(i18next));

export default (app: Express.Application) => {
  app.use([debugRouter, documentRouter, pdfRouter]);
};

old config looked like:

import * as Koa from 'koa';
import documentRouter from './documentRouter';
import errorReportsRouter from './errorReportsRouter';
import pdfRouter from './pdfRouter';
import debugRouter from './debugRouter';

import * as i18next from 'i18next';
// @ts-ignore
import * as Backend from 'i18next-fs-backend';
// @ts-ignore
import * as koaI18next from 'koa-i18next';

// @ts-ignore
i18next.use(Backend).init({
  initImmediate: false,
  backend: {
    // translation resources
    loadPath: path.resolve(__dirname, '../i18n/{{lng}}/{{ns}}.json'),
    addPath: path.resolve(__dirname, '../i18n/{{lng}}/{{ns}}.missing.json'),
  },
  preload: ['en-US', 'en-GB', 'de-DE', 'fr-FR'],
  fallbackLng: 'de-DE',
});

export default (app: Koa) => {
  app.use(debugRouter.routes());
  app.use(documentRouter.routes());
  app.use(errorReportsRouter.routes());
  app.use(pdfRouter.routes());
  app.use(
    koaI18next.getResourcesHandler(i18next, {
      path: '/locales/resources.json',
    })
  );
};

Solution

I did miss out the ‘linking’ part from the old implementation.

path: '/locales/resources.json'

i18n had no access to the files basically. I did use the the resource handler in order to redirect properly and use the middleware, now it works as before.

Updated Code:

import * as Express from 'express';
import documentRouter from './documentRouter';
import pdfRouter from './pdfRouter';
import debugRouter from './debugRouter';

import * as i18next from 'i18next';
// @ts-ignore
import * as Backend from 'i18next-fs-backend';
// @ts-ignore
import middleware from 'i18next-http-middleware';

// @ts-ignore
i18next.use(Backend).init({
  initImmediate: false,
  backend: {
    // translation resources
    loadPath: path.resolve(__dirname, '../i18n/{{lng}}/{{ns}}.json'),
    addPath: path.resolve(__dirname, '../i18n/{{lng}}/{{ns}}.missing.json'),
  },
  preload: ['en-US', 'en-GB', 'de-DE', 'fr-FR'],
  fallbackLng: 'de-DE',
});

export default (app: Express.Application) => {
  // load translation resources
  //@ts-ignore 
  app.get("/locales/resources.json", middleware.getResourcesHandler(i18next));
  app.use([debugRouter, documentRouter, pdfRouter]);
  //@ts-ignore
  app.use(middleware.handle(i18next));

};

Answered By – LaFllamme

Answer Checked By – Mary Flores (AngularFixing Volunteer)