title: il8n not working in react app after converting to single spa
body: <p>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.</p>
  <p>Should I modify something in the webpack.config.js to get it right</p>
  <pre><code>import i18n from &quot;i18next&quot;;
  import { initReactI18next } from &quot;react-i18next&quot;;
  import i18nextHttpBackend from &quot;i18next-http-backend&quot;;
  import Cookies from &quot;js-cookie&quot;;
  import LanguageDetector from &quot;i18next-browser-languagedetector&quot;;
  
  
  i18n
    .use(i18nextHttpBackend)
    .use(initReactI18next)
    .use(LanguageDetector)
    .init({
      lng: Cookies.get(&quot;locale&quot;) || &quot;es&quot;,
      fallbackLng: &quot;en&quot;,
      debug: false,
      supportedLngs: [&quot;en&quot;, &quot;es&quot;],
      interpolation: {
        escapeValue: false,
      },
  
    });
  
  
  
  export default i18n;
  
  </code></pre>
  <p>il8n is imported in App.js
  import &quot;./i18n&quot;;</p>
  <p>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.
  <a href="http://single-spa-playground.org/locales/en/translation.json" rel="nofollow noreferrer">http://single-spa-playground.org/locales/en/translation.json</a></p>
  <p>I did follow this tutorial <a href="https://www.youtube.com/watch?v=W8oaySHuj3Y&amp;list=PLLUD8RtHvsAOhtHnyGx57EYXoaNsxGrTU&amp;index=13" rel="nofollow noreferrer">https://www.youtube.com/watch?v=W8oaySHuj3Y&amp;list=PLLUD8RtHvsAOhtHnyGx57EYXoaNsxGrTU&amp;index=13</a> to convert the react app to single spa.</p>
  <p>WebPack Config</p>
  <pre><code>const { merge } = require(&quot;webpack-merge&quot;);
  const singleSpaDefaults = require(&quot;webpack-config-single-spa-react&quot;);
  const Dotenv = require(&quot;dotenv-webpack&quot;);
  
  module.exports = (webpackConfigEnv, argv) =&gt; {
    console.log(webpackConfigEnv);
    const defaultConfig = singleSpaDefaults({
      orgName: &quot;WHATEVR&quot;,
      projectName: &quot;WHATEVER&quot;,
      webpackConfigEnv,
      argv,
    });
  
    return merge(defaultConfig, {
      // modify the webpack config however you'd like to by adding to this object
      plugins: [new Dotenv()],
      devServer: {
        headers: {
          &quot;Access-Control-Allow-Origin&quot;: &quot;*&quot;,
          &quot;Access-Control-Allow-Methods&quot;:
            &quot;GET, POST, PUT, DELETE, PATCH, OPTIONS&quot;,
          &quot;Access-Control-Allow-Headers&quot;:
            &quot;X-Requested-With, content-type, Authorization&quot;,
        },
      },
    });
  };
  
  </code></pre>
  <p>Tried Solution but still not solved
  <a href="https://stackoverflow.com/questions/65576842/reactjs-error-loading-translation-files">Reactjs - error loading translation files</a></p>