Cannot get translation from external public URL

[wamujlb]

🐛 Bug Report

Hi. I'm trying to load translation file from public URL but I get (failed)net::ERR_FAILED. URL is correct and I can open it from my browser.

To Reproduce

Here is my config file:

{
    debug: true,
    lng: 'en',
    fallbackLng: 'en',
    defaultNS: 'common',
    interpolation: {
      escapeValue: false,
      format: (value, format: string | undefined) => {
        if (format === 'uppercase') {
          return value.toUpperCase();
        }
        return value;
      },
    },
    backend: {
      crossDomain: true,
      loadPath() {
        return '<S3_BUCKET>.eu-central-1.amazonaws.com/{{lng}}/{{ns}}.json';
      },
    },
  }

Expected behavior

Should load translation file

Your Environment

• runtime version: i.e. node v12.18.4
• i18next version: i.e. 19.7.0
• os: Mac

[adrai]

Please verify your url again... In your screenshot the request is red What happens if you insert the url directly in the browser?

[wamujlb]

It loads URL correctly and I see the result

[adrai]

Sorry, can't help without more info... (failed)net::ERR_FAILED is a networking error

[wamujlb]

Right now I set requestOptions: { method: 'GET', mode: 'no-cors' } Now I see success but no data is loaded.

[adrai]

Sorry, can't help without a reproducable example. Maybe your cors configuration is not correct

[wamujlb]

Where can I configure CORS for the request?

[adrai]

CORS are configured on server side

[adrai]

check the console tab, there you will see the browser error, if there is a cors issue

[wamujlb]

@adrai there is no error right now. Could you please give me an example how to load translation from any Public URL?

[adrai]

Take this example: https://github.com/i18next/i18next-http-backend/blob/master/example/node/app.js change the loadPath with: https://api.locize.app/8166472e-7ac6-44e5-a53f-96a6ca165e2b/latest/{{lng}}/{{ns}} replace t('welcome') with t('localized')

[adrai]

btw: regarding s3 cors => https://docs.aws.amazon.com/AmazonS3/latest/user-guide/add-cors-configuration.html#:~:text=To%20add%20a%20CORS%20configuration,and%20then%20choose%20CORS%20configuration. https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors

[adrai]

maybe @hyprstack had a similar issue with s3?

[wamujlb]

Trying to solve it, but have no idea what is happening. My AWS configuration seems fine

[adrai]

Trying to solve it, but have no idea what is happening. My AWS configuration seems fine

Then try to do a simple fetch to your s3 bucket...

fetch('url to your json file')

[wamujlb]

@adrai thank you for your help. Added CORS configuration in AWS. We can close this issue

[adrai]

If you like this module don’t forget to star this repo. Make a tweet, share the word or have a look at our https://locize.com to support the devs of this project.

There are many ways to help this project 🙏

[hyprstack]

Have you tried adding the lng and ns arguments to your loadPath method? I noticed you don't have them in the function definition.

loadPath(lng, ns) { return '<S3_BUCKET>.eu-central-1.amazonaws.com/{{lng}}/{{ns}}.json'; },

[adrai]

Have you tried adding the lng and ns arguments to your loadPath method?

Yes, it's used in the tests... => https://github.com/i18next/i18next-http-backend/blob/master/test/http.spec.js#L96

I noticed you don't have them in the function definition.

should be this: ((lngs: string[], namespaces: string[]) => string) => https://github.com/i18next/i18next-http-backend/blob/master/index.d.ts#L3