i18next / i18next-http-backend

i18next-http-backend is a backend layer for i18next using in Node.js, in the browser and for Deno.
MIT License
453 stars 70 forks source link

i18next::backendConnector error Only absolute URLs are supported (SSR) #54

Closed stanislav-sidorov-empeek closed 3 years ago

stanislav-sidorov-empeek commented 3 years ago

🐛 Bug Report

Hi there, does anyone know what i'm doing wrong with backend config? seems to me this error is related to i18next-http-backend Build fails with error i18next::backendConnector: loading namespace translations for language en failed TypeError: Only absolute URLs are supported

tried different backend libs with no success, this error appears only with i18next-http-backend

Screenshot 2021-03-13 at 13 48 21

To Reproduce

**i18n.js**
import i18n from 'i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    backend: { loadPath: `/locales/{{lng}}/{{ns}}.json` },
    fallbackLng: 'en',

    // have a common namespace used around the full app
    ns: ['translations'],
    defaultNS: 'translations',

    debug: true,
    initImmediate: false,

    react: {
      wait: true
    }
  });

export default i18n;

**gatsby-ssr.js**

import React from 'react';
import { I18nextProvider } from 'react-i18next';

import { GlobalState } from './src/components/GlobalState/GlobalState';
import i18n from './src/utils/i18n';

import 'slick-carousel/slick/slick.css';

export const wrapRootElement = ({ element }) => (
  <I18nextProvider i18n={i18n}>{element}</I18nextProvider>
);

export const wrapPageElement = ({ element, props }) => (
  <GlobalState {...props}>{element}</GlobalState>
);

export const replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
  i18n.loadNamespaces(['translations'], () => {
    replaceBodyHTMLString(bodyComponent);
  });
};

**gatsby-node.js**

exports.onPostBuild = () => {
  fs.copySync(`./src/locales`, `./public/locales`);
};

Expected behavior

Build project without errors

Your Environment

adrai commented 3 years ago

On server side (SSR) there is no browser having loaded your app... so the url: "/locales/{{lng}}/{{ns}}.json" is invalid... relative urls work only in browser environment.

This is why you should configure an absolute url....

https://stackoverflow.com/questions/44342226/next-js-error-only-absolute-urls-are-supported/44344023