tolgee
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'scopes')
When I block all network requests to https://app.tolgee.io (eg. to simulate a server-downtime of tolgee), I am expecting that the static data / fallback data will be applied. However, once I block these requests, I get a runtime error:
tolgee.esm.mjs?c93d:1643 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'scopes')
at CoreService.eval (tolgee.esm.mjs?c93d:1643:1)
at step (tolgee.esm.mjs?c93d:75:1)
at Object.eval [as next] (tolgee.esm.mjs?c93d:56:46)
at fulfilled (tolgee.esm.mjs?c93d:46:43)
Using @tolgee/react 4.9.1 in a Next.JS (12.2.5) application.
Hello. Can you also share your Tolgee configuration (probably provided to TolgeeProvider component)?
_app.tsx
import deLocale from "../lang/resources/de.json";
import enLocale from "../lang/resources/en.json";
...
const { locale: nextJsLocale } =
useRouter();
return (
<>
<Head>
<title>Test</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<TolgeeProvider
forceLanguage={nextJsLocale}
apiKey={process.env.NEXT_PUBLIC_TOLGEE_API_KEY}
apiUrl={process.env.NEXT_PUBLIC_TOLGEE_API_URL}
staticData={{
de: deLocale,
en: enLocale,
}}
>
...MoreProviders START...
<Component {...pageProps} />
...MoreProviders END...
</TolgeeProvider>
</>
)
pages/example.tsx
import { NextPage } from 'next';
import { T } from '@tolgee/react';
const Example: NextPage = () => {
return (
<T keyName="myTest" >
FALLBACK TEST
</T>
);
};
export default Example;
What I noticed:
Using npm run build and npm run start actually produces a valid result. If Tolgee server is unavailable or network requests are blocked, the static data is shown, or the fallback text if no matching key can be found within the static data.
However, if I run npm run dev, then I get above error. What do I need to configure, to support using Tolgee with the Next.JS development server?
Hey, I've tried to replicate this and the fallback is working fine for me (it displays translations from staticData). However problem is that next.js overwhelmed by errors from console as each translate method throws an error. This is now quite hard to change. I'm working on new version of core, where I want to change this logic completely so it shouldn't be a problem in the future, so I would leave this for the new core.
The same issue exists, when the API url in the tolgee browser extensions ends with an slash
instrument.ts:129 Error: Api http error
at new t (ApiHttpError.ts:3:5)
at Function.<anonymous> (ApiHttpService.ts:21:21)
at tslib.es6.js:102:23
at Object.next (tslib.es6.js:83:53)
at tslib.es6.js:76:71
at new Promise (<anonymous>)
at i (tslib.es6.js:72:12)
at e.handleErrors (ApiHttpService.ts:19:37)
at ApiHttpService.ts:42:22
-----------------------------------------------------------------------------------
instrument.ts:129 Error getting scopes. Trying to switch to production mode!
-----------------------------------------------------------------------------------
instrument.ts:129 Couldn't connect to Tolgee
-----------------------------------------------------------------------------------
TypeError: Cannot read properties of undefined (reading 'scopes')
at e.<anonymous> (CoreService.ts:71:40)
at tslib.es6.js:102:23
at Object.next (tslib.es6.js:83:53)
at s (tslib.es6.js:73:58)
if you removing the ending slash in the API url it works fine. The extension should validate this.
