0

i'm having cors when changing language with i18n.changeLanguage function.I have two buttons that have onClick method and call a custom function named changeLang.Inside that function i am calling i18n.changeLanguage function and pass it to the lng parameter.


    const changeLang = lng => {
      i18n.i18n.changeLanguage(lng);
    };


    <button onClick={() => changeLang('en')} className="en">
       EN
    </button>
    <button onClick={() => changeLang('tr')} className="tr">
       TR
    </button>

enter image description here

and My i18n config is just like this .

import NextI18Next from 'next-i18next';
import { initReactI18next } from 'react-i18next';

export default new NextI18Next({
  use: [initReactI18next],
  defaultLanguage: 'tr',
  fallbackLng: 'en',
  otherLanguages: ['en'],
  localeSubpaths: {
    en: 'en',
  },
  localePath: '/app/static/locales',
  detection: {
    order: ['cookie', 'localStorage'],
    lookupCookie: 'next-i18next',
    lookupLocalStorage: 'i18nextLng',
    caches: ['cookie', 'localStorage'],
  },
});
isa_toltar
  • 586
  • 5
  • 11

2 Answers2

0

From the source code of the lib, looks like the default localePath has a public/static/locales as a value.

Pay Attention that it doesn't have the first slash, try to remove it.

felixmosh
  • 32,615
  • 9
  • 69
  • 88
0

I got the error.Here is the correct version.I added backend object and loadPath inside it and it solved the issue.

import NextI18Next from 'next-i18next';
import { initReactI18next } from 'react-i18next';

export default new NextI18Next({
  use: [initReactI18next],
  defaultLanguage: 'tr',
  fallbackLng: 'en',
  otherLanguages: ['en'],
  localeSubpaths: {
    en: 'en',
  },
  localePath: '/app/static/locales',
  detection: {
    order: ['cookie', 'localStorage'],
    lookupCookie: 'next-i18next',
    lookupLocalStorage: 'i18nextLng',
    caches: ['cookie', 'localStorage'],
  },
  backend: {
   loadPath: 'app/static/locales/{{lng}}/{{ns}}.json',
  }
});
isa_toltar
  • 586
  • 5
  • 11