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": "#!/"
        }
    }
]

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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;

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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?

CodePudding user response：

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.