Tolgee init with relative URL is not working

[Fallup]

Having a relative URL in the apiUrl of tolgee config was working fine until the v5.32.0
Since then, having .e.g. apiUrl: '/i18n' is not working. We are getting this error during init:

index-DWKcsVx-.js:1849 RecordFetchError: Tolgee: Failed to fetch record for "en" and "translation"
    at p (index-DWKcsVx-.js:1849:10595)
    at async Promise.all (/index 0)
    at async Object.loadRecords (index-DWKcsVx-.js:1849:12283)
    at async Object.loadRecord (index-DWKcsVx-.js:1849:23091)
    at async Object.read (index-DWKcsVx-.js:1849:30920)Caused by: TypeError: Failed to construct 'URL': Invalid URL
    at Object.getRecord (tolgee-in-context-tools.esm-BsThm1rR.js:698:2007)
    at getBackendDevRecord (index-DWKcsVx-.js:1849:16869)
    at p (index-DWKcsVx-.js:1849:10573)
    at index-DWKcsVx-.js:1849:12159
    at Array.map (<anonymous>)
    at Object.loadRecords (index-DWKcsVx-.js:1849:12058)
    at Object.loadRecords (index-DWKcsVx-.js:1849:23038)
    at Object.loadRecord (index-DWKcsVx-.js:1849:23099)
    at Object.read (index-DWKcsVx-.js:1849:30928)
    at Uvr.read (index-DWKcsVx-.js:1849:72978)

I think that the changes here #3404 broke it, specifically this line a61f250#diff-1074ae85ad4b1e90943dc83f6c7be7cab57f7fe1cb06788580b278371bf471ddR16

This will fail since the base is not provided, see https://developer.mozilla.org/en-US/docs/Web/API/URL/URL#base

We are now unable to use relative URL in the config which is important to us as we have proxies set up on our servers to handle correct redirections.

[JanCizmar]

Hello!
You should not use this apiUrl, instead, you are probably looking for BackendFetch plugin.

https://docs.tolgee.io/js-sdk/providing-static-data/

[Fallup]

Hello! You should not use this apiUrl, instead, you are probably looking for BackendFetch plugin.

https://docs.tolgee.io/js-sdk/providing-static-data/

Thanks for the quick response!

We are using statically provided data in production mode, but this is not related to production but to test server where we deploy the bundle but translation managers are working with the translations and updating them live in the Tolgee instance. (so we are not working with static data).
We are not looking for the backend fetch plugin and content delivery as the apiUrl setup was working just fine for this purpose until the last "minor" update, which broke this as I described and it is kind of limiting to require it to be non-relative all of a sudden.
If you don't intent to fix this then we will change our configs. At least people facing the same issue since v5.32.0 will now be able to see that this was discussed.

[JanCizmar]

OK, sorry for misunderstanding. It looks like your solution worked just by coincidence.

However, it's still not clear for me. Where have been the data fetched from? Is it Tolgee REST API or Content delivery?

We are not looking for the backend fetch plugin and content delivery as the apiUrl setup was working just fine for this purpose until the last "minor" update, which broke this as I described and it is kind of limiting to require it to be non-relative all of a sudden.

What was working just fine?

[Fallup]

OK, sorry for misunderstanding. It looks like your solution worked just by coincidence.

However, it's still not clear for me. Where have been the data fetched from? Is it Tolgee REST API or Content delivery?

Sorry for not being 100% clear on the setup. We are using Tolgee in the React app with i18n and the @tolgee/i18next plugin. Data is fetched from the Tolgee REST API. Here is the excerpt from the init:

const tolgeeConfig =
    CURRENT_ENV === ENV.PRODUCTION
      ? {
          // --- Note - for production if the files will be bundled with the client app
          staticData: languageResources,
        }
      : {
          // Development, Test
          apiUrl: import.meta.env.VITE_TOLGEE_API_URL,
          apiKey: import.meta.env.VITE_TOLGEE_API_KEY,
        }

  const tolgee = Tolgee()
    .use(I18nextPlugin())
    .init({ ...tolgeeConfig, defaultNs: DEFAULT_TRANSLATION_NAMESPACE })

  // Initialize i18n with default locale
  try {
    // Dynamically import and append the InContextTools to prevent unnecessary bundle size increase in prod
    // and allow browser in context translating in other envs
    if (CURRENT_ENV !== ENV.PRODUCTION) {
      await import('@tolgee/web/tools').then((module) => {
        tolgee.addPlugin(module.InContextTools())
      })
    }

What was working just fine?

For the local development environment having apiUrl: 'https://tolgee.our-tolgee-server.com' and for the test environment (where the translations are still delivered via tolgee REST API and users are able to use the browser plugin) we had relative URL set apiUrl: '/i18n' due to proxy and other reasons.
This setup was working just fine until the version v5.32.0 where we are unable to use relative URL anymore due to the reasons I explained in the issue report.

[JanCizmar]

Aha, understood. Then I am reopening this and will let @stepan662 to consider the next steps.

PR fixing this issue is appreciated btw! 🙂