Doesn't get the changes in json #76

ls30378 · 2022-06-30T08:42:19Z

ls30378
Jun 30, 2022

Hi, I have an app using i18n for translation, and after I changed translation.json (the file from which i18next gets translations) sometimes I get the changes sometimes not, the error I get is:

Warning: Text content did not match. Server: "Welcome" Client: "Welcome dear user"

I tried deleting public/build /.cache and /build and re running yarn dev
but I still have the same issue
I followed instructions from this repo.
I use this configuration on entry.client.jsx

i18next
  .use(initReactI18next) // Tell i18next to use the react-i18next plugin
  .use(LanguageDetector) // Setup a client-side language detector
  .use(Backend) // Setup your backend
  .init({
    ...i18n, // spread the configuration
    // This function detects the namespaces your routes rendered while SSR use
    ns: getInitialNamespaces(),
    backend: {
      loadPath: "/locales/{{lng}}/{{ns}}.json",
    },
    detection: {
      // Here only enable htmlTag detection, we'll detect the language only
      // server-side with remix-i18next, by using the `<html lang>` attribute
      // we can communicate to the client the language detected server-side
      order: ["htmlTag"],
      // Because we only use htmlTag, there's no reason to cache the language
      // on the browser, so we disable it
      caches: [],
    },
  })
  .then(() => {
    // After i18next has been initialized, we can hydrate the app
    // We need to wait to ensure translations are loaded before the hydration
    // Here wrap RemixBrowser in I18nextProvider from react-i18next
    return hydrate(
      <I18nextProvider i18n={i18next}>
        <RemixBrowser />
      </I18nextProvider>,
      document
    );
  });

it says that caching is disabled, but It still use cache I think.

Answered by fyra3or

Jun 30, 2022

You can configure the backend like this:

backend: {
  loadPath: '/locales/{{lng}}/{{ns}}.json',

  // Disable cache for translation files in development
  requestOptions: { cache: process.env.NODE_ENV === 'production' ? 'default' : 'no-cache' }

  // Optional: Add versioning to your translations to bust cache when deploying to production
  queryStringParams: { v: '1.0.0' },
}

More options: https://github.com/i18next/i18next-http-backend

View full answer

fyra3or · 2022-06-30T09:46:02Z

fyra3or
Jun 30, 2022

You can configure the backend like this:

backend: {
  loadPath: '/locales/{{lng}}/{{ns}}.json',

  // Disable cache for translation files in development
  requestOptions: { cache: process.env.NODE_ENV === 'production' ? 'default' : 'no-cache' }

  // Optional: Add versioning to your translations to bust cache when deploying to production
  queryStringParams: { v: '1.0.0' },
}

More options: https://github.com/i18next/i18next-http-backend

4 replies

fyra3or Jun 30, 2022

Oops my bad you don't have access to process in entry.client, you need to do that conditional in a different way..

sergiodxa Jun 30, 2022
Maintainer

You can access process.env.NODE_ENV client side, Remix treats NODE_ENV as a build variable.

fyra3or Jun 30, 2022

Nice! Then the configuration works.

@ls30378 i believe caches in detection is about caching the user language, it doesnt affect cache of the requests to translation files. This is why you need to configure the backend like above.

ls30378 Jul 1, 2022
Author

Yess, this works! Thank You!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Doesn't get the changes in json #76

{{title}}

Replies: 1 comment 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Doesn't get the changes in json #76

ls30378 Jun 30, 2022

Replies: 1 comment · 4 replies

fyra3or Jun 30, 2022

fyra3or Jun 30, 2022

sergiodxa Jun 30, 2022 Maintainer

fyra3or Jun 30, 2022

ls30378 Jul 1, 2022 Author

ls30378
Jun 30, 2022

Replies: 1 comment 4 replies

fyra3or
Jun 30, 2022

sergiodxa Jun 30, 2022
Maintainer

ls30378 Jul 1, 2022
Author