I am working on React web app and I use i18n and i18next-browser-languagedetector for translation the app. On my local all works fine, even on server all is works in the same way. But I have a problem on aws s3 bucket. After I build my react project and upload it to s3 bucket i18n stop working correctly.
I am new user on aws, so maybe I am doing something wrong, sorry about that.
My s3 bucket configuration:
Static website hosting with following redirection rules
[ { "Condition": { "HttpErrorCodeReturnedEquals": "404" }, "Redirect": { "HostName": "my-bucket-name.s3-website-sa-east-1.amazonaws.com", "ReplaceKeyPrefixWith": "#!/" } }, { "Condition": { "HttpErrorCodeReturnedEquals": "403" }, "Redirect": { "HostName": "my-bucket-name.s3-website-sa-east-1.amazonaws.com", "ReplaceKeyPrefixWith": "#!/" } } ]
First I pass current language in the path as my-bucket-name.s3-website-sa-east-1.amazonaws.com/en/ but when I load web app I always see detected language en even if I set another language in the path. Then I tried to put language in query string as my-bucket-name.s3-website-sa-east-1.amazonaws.com/?lang=en and I faced with the same wrong behaviour. My i18n file.
import i18n from "i18next"; import LanguageDetector from "i18next-browser-languagedetector"; const options = { order: ['querystring'], lookupQuerystring: 'lng', }; const languages = ["en", "pt"] i18n.use(LanguageDetector).init({ detection: options, resources: {...}, fallbackLng: "en", debug: true, whitelist: languages, checkWhitelist: true , ns: ["translations"], defaultNS: "translations", keySeparator: false, interpolation: { escapeValue: false, formatSeparator: "," }, react: { wait: true } }); export default i18n;
I also tried to set fallback language to pt and in this case on aws s3 bucket it always detected as pt even if in path or query string I set en.
So it is always using fallback language for some reason.
Why language detection may not work on aws s3 bucket? Maybe someone faced with similar problem?
Advertisement
Answer
I had the same problem, I accidentally found a solution. Check that in the Error document field you have written index.html in the same way as in Index document field. If there is a slash, remove it. Also, make Redirection rules field empty.