Safari browser pluralization failure about svelte-i18n HOT 8 CLOSED

Hi @kaisermann. It's actually not affecting me anymore because I am no longer doing any redirects for the default locale.

from svelte-i18n.

Resurrecting this issue as I can verify it's a real problem on older versions of Safari and when it occurs as an uncaught exception it can hang your application. This is how I solved it:

Install plural rules polyfill

npm install @formatjs/intl-pluralrules

As per https://formatjs.io/docs/polyfills/intl-pluralrules

Conditionally load polyfill in client.js

import * as sapper from '@sapper/app';

import 'i18n';

const config = {
    target: document.querySelector('#sapper')
};

if (!Intl.PluralRules) {
    (async () => {
        await import('@formatjs/intl-pluralrules/polyfill');
	await import('@formatjs/intl-pluralrules/dist/locale-data/en');
	await import('@formatjs/intl-pluralrules/dist/locale-data/ga');
	sapper.start(config);
    })();
} else {
    sapper.start(config);
}

from svelte-i18n.

After upgrading Safari to v13.0.3, I am also suddenly getting this error, with a slightly different stack trace.

devDependencies:

"sapper": "^0.27.9",
"svelte": "^3.12.1",
"svelte-i18n": "^1.1.2-beta"

[Error] Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'currentDictionary[locale][path]')
	(anonymous function) (index.5a28b79b.js:2944)
	memoized (index.5a28b79b.js:2852)
	getLocalizedMessage (index.5a28b79b.js:2958)
	(anonymous function) (index.5a28b79b.js:2979)
	create_fragment$1 (index.00364187.js:149)
	init (index.e40e91ec.js:781)
	Index (index.00364187.js:352)
	update (client.9ef60de1.js:2872)
	update (client.9ef60de1.js:3001)
	update (client.9ef60de1.js:2469)
	update (index.e40e91ec.js:410)
	flush (index.e40e91ec.js:384)
	promiseReactionJob

from svelte-i18n.

Hey guys 👋 I'm going to take a look at this in the coming week! Thanks for your patience 😁

from svelte-i18n.

Obrigado! Here's some more info. I am using sapper, and this is my script code in _layout.svelte:

 import * as sapper from '@sapper/app';
 import { onMount } from 'svelte';
 import { dictionary, locale, getClientLocale } from 'svelte-i18n';

 import Nav from '../components/nav/Nav.svelte';
 import '../dict.js';

 export let segment;

 const { page } = sapper.stores();

 onMount (() => {
   page.subscribe(p => {
     if (p.query.locale !== $locale) {
       sapper.goto(`${p.path}?locale=${$locale}`, { replaceState: true });
     }
   });

   locale.subscribe(l => {
     if ($page.query.locale !== l) {
       sapper.goto(`${$page.path}?locale=${l}`, { replaceState: true });
     }
   });
 });

So what happens is when I go to http://localhost:3000/ it redirects to http://localhost:3000/?locale=en. The error is thrown after the redirect, but when I refresh the error does not occur as the query params remain.

(I always thought the above code was a hack but I want users to be able to refresh and keep their locale, rather than it being reset.)

In any case, when I comment out both goto lines, no redirect occurs and no error occurs. Only in Safari Desktop after upgrading it though (because I didn't have this issue before). It works fine in both Chrome and Firefox.

from svelte-i18n.

@felideon @PritulaRoman Can you guys share a minimal reproducible repo with your issue happening? Just tried the example project in this repo on safari 13.0.2 and it's working fine. 😁

from svelte-i18n.

Sorry @kaisermann, I haven't had time to set up a repro. I did upgrade to v2 though and at least now I get a more informative error:

Error: [svelte-i18n] Cannot format a message without first setting the initial locale.

Still weird that it only happens in Safari.

I'll let you know once I get a chance to build a repro.

from svelte-i18n.

Hey @felideon 👋 Are you still getting this issue?

from svelte-i18n.