CODEWITHSUNDEEP
javascriptreactjsamazon-web-servicesamazon-s3i18next
Ann
Ann

Reputation: 892

Language detection in the path and query string works incorrectly on AWS s3 bucket

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. screenshot from console 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?

Upvotes: 2

Views: 629

Answers (1)

Maxim
Maxim

Reputation: 68

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. The right way to do that Also, make Redirection rules field empty.

Upvotes: 1

Related Questions