diff --git a/package.json b/package.json index c2b6ee6e5..a4b186538 100644 --- a/package.json +++ b/package.json @@ -118,5 +118,6 @@ }, "resolutions": { "strip-ansi": "6.0.1" - } + }, + "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" } diff --git a/src/initializer.tsx b/src/initializer.tsx index 4bc1dc9f2..a71417588 100644 --- a/src/initializer.tsx +++ b/src/initializer.tsx @@ -11,6 +11,7 @@ import LanguageDetector from "i18next-browser-languagedetector"; import Backend from "i18next-http-backend"; import * as Sentry from "@sentry/react"; import { logger } from "matrix-js-sdk/src/logger"; +import { shouldPolyfill as shouldPolyfillSegmenter } from "@formatjs/intl-segmenter/should-polyfill"; import { getUrlParams } from "./UrlParams"; import { Config } from "./config/Config"; @@ -41,10 +42,10 @@ export class Initializer { return Initializer.internalInstance?.isInitialized; } - public static initBeforeReact(): void { - // this maybe also needs to return a promise in the future, - // if we have to do async inits before showing the loading screen - // but this should be avoided if possible + public static async initBeforeReact(): Promise { + if (shouldPolyfillSegmenter()) { + await import("@formatjs/intl-segmenter/polyfill-force"); + } //i18n const languageDetector = new LanguageDetector(); @@ -54,7 +55,7 @@ export class Initializer { lookup: () => getUrlParams().lang ?? undefined, }); - i18n + await i18n .use(Backend) .use(languageDetector) .use(initReactI18next) @@ -74,9 +75,6 @@ export class Initializer { order: ["urlFragment", "navigator"], caches: [], }, - }) - .catch((e) => { - logger.error("Failed to initialize i18n", e); }); // Custom Themeing diff --git a/src/main.tsx b/src/main.tsx index d4a4539b7..b6584d1bf 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -20,7 +20,6 @@ import { setLogExtension as setLKLogExtension, setLogLevel as setLKLogLevel, } from "livekit-client"; -import "@formatjs/intl-segmenter/polyfill"; import "@formatjs/intl-durationformat/polyfill"; import { App } from "./App"; @@ -57,12 +56,17 @@ if (fatalError !== null) { throw fatalError; // Stop the app early } -Initializer.initBeforeReact(); +Initializer.initBeforeReact() + .then(() => { + const history = createBrowserHistory(); -const history = createBrowserHistory(); - -root.render( - - - , -); + root.render( + + + , + ); + }) + .catch((e) => { + logger.error("Failed to initialize app", e); + root.render(e.message); + });