Bug lié aux thèmes - Wrong assertion encountered

[totakoko]

Salut !
J'ai tenté une montée de version côté FCU pour utiliser la dernière (1.19.0), mais j'ai une erreur liée au thème.

Je pense que c'est lié aux changements récents de la version 1.16 dans ba442f9, c359951 et c359951.

Mini analyse : Avant dans le local storage scheme valait light par exemple, et maintenant ça vaut "light", contrairement à scheme-default qui vaut light. C'est bien voulu ?

Si mon local storage est vide, les valeurs sont initialisées.
Quand je recharge la page, j'ai une erreur depuis la version 1.16.3 (ça fonctionne en 1.16.2) :

[garronej]

Bonjour @totakoko,

Pourrais-tu nous fournir un repo de reproduction?

[totakoko]

@garronej J'ai un peu galéré en voulant reproduire, je n'y arrivais plus... 🤯 et en fait le problème survient dès lors qu'on utilise plusieurs onglets en local avec next.js.

Petite vidéo pour voir le bug avec la version 1.20.0, je nettoie le local storage puis je reload la page plusieurs fois. Quand il n'y a plus qu'une seule fenêtre, alors il n'y a pas de problème.

bug-dsfr-multionglets.webm

J'ai ce comportement en prod actuellement avec de light qui devient "light" automatiquement dès qu'il y a plusieurs onglets, mais comme c'est la version 1.13.6 il n'y a pas d'erreur.

C'est peut-être lié à notre setup next.js donc voici un repo avec la dernière version au cas où 👉 https://github.com/betagouv/france-chaleur-urbaine/tree/bug_theme_dsfr_upgrade

[garronej]

Aie.
Pas facile a reproduire donc.
Es-ce que tu saurais me dire l'assertion qui lance l'erreur en remontant dans la stack trace.

Je serais peut être en mesure de comprendre ce qui se passe si je vois la ligne.

[totakoko]

Le assert en erreur est ici :

react-dsfr/src/useIsDark/client.ts

Lines 216 to 234 in e0b8234

	document.documentElement.setAttribute(
	data_fr_scheme,
	((): ColorScheme | "system" => {
	const colorSchemeReadFromLocalStorage = localStorage.getItem("scheme");
	if (colorSchemeReadFromLocalStorage === null) {
	return colorSchemeExplicitlyProvidedAsParameter;
	}
	assert(
	isAmong<ColorScheme | "system">(
	["dark", "light", "system"],
	colorSchemeReadFromLocalStorage
	)
	);
	return colorSchemeReadFromLocalStorage;
	})()
	);

La valeur de colorSchemeReadFromLocalStorage vaut "light" avec les guillemets.