il8n not working in react app after converting to single spa

Question

After converting a react app to single spa which had il8n implemented I am facing a problem where translation.json cannot be accessed hence not fetching the labels.

Should I modify something in the webpack.config.js to get it right

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import i18nextHttpBackend from "i18next-http-backend";
import Cookies from "js-cookie";
import LanguageDetector from "i18next-browser-languagedetector";


i18n
  .use(i18nextHttpBackend)
  .use(initReactI18next)
  .use(LanguageDetector)
  .init({
    lng: Cookies.get("locale") || "es",
    fallbackLng: "en",
    debug: false,
    supportedLngs: ["en", "es"],
    interpolation: {
      escapeValue: false,
    },

  });



export default i18n;

il8n is imported in App.js import "./i18n";

Initially before converting to single spa the app was working fine and making a call to http://localhost:3000/locales/en/translation.json but after converting the app to single spa the get request would fail. http://single-spa-playground.org/locales/en/translation.json

I did follow this tutorial https://www.youtube.com/watch?v=W8oaySHuj3Y&list=PLLUD8RtHvsAOhtHnyGx57EYXoaNsxGrTU&index=13 to convert the react app to single spa.

WebPack Config

const { merge } = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa-react");
const Dotenv = require("dotenv-webpack");

module.exports = (webpackConfigEnv, argv) => {
  console.log(webpackConfigEnv);
  const defaultConfig = singleSpaDefaults({
    orgName: "WHATEVR",
    projectName: "WHATEVER",
    webpackConfigEnv,
    argv,
  });

  return merge(defaultConfig, {
    // modify the webpack config however you'd like to by adding to this object
    plugins: [new Dotenv()],
    devServer: {
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods":
          "GET, POST, PUT, DELETE, PATCH, OPTIONS",
        "Access-Control-Allow-Headers":
          "X-Requested-With, content-type, Authorization",
      },
    },
  });
};

Tried Solution but still not solved Reactjs - error loading translation files

Answer 1

The issue is that previously, the React app also served as the server that provided the index.html file along with other static assets (eg. your localized translation json files). In single-spa, that is no longer the case; that is instead now the root-config. You'll need to update your i18next-http-backend loadPath configuration so that the library tries to retrieve them from the right path which is no longer the root url. Without being familiar with what you want to achieve, you have two options:

• use __webpack_public_path__ to dynamically create the correct URL to point to the assets served by this microfrontend, eg. loadPath: `${__webpack_public_path__} /locales/{{lng}}/{{ns}}.json`,
• if you have a separate i18n service, point the URL to that. This may also require crossDomain and withCredentials depending on how that is also configured.