Fait un rechargement complet de la page en cas d'erreur de chargement…

… dynamique d'un composant

app.territoiresentransitions.react/src/app/pages/Auth/RecoverLandingPage.tsx

@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 import {Spacer} from 'ui/dividers/Spacer';
 

app.territoiresentransitions.react/src/app/pages/Auth/RegisterPage.tsx

@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 import {Spacer} from 'ui/dividers/Spacer';
 

app.territoiresentransitions.react/src/app/pages/Auth/ResetPasswordPage.tsx

@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 import {Spacer} from 'ui/dividers/Spacer';
 

app.territoiresentransitions.react/src/app/pages/Profil/ProfilPage.tsx

@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const Profil = lazy(() => import('app/pages/Profil/Profil'));

app.territoiresentransitions.react/src/app/pages/ToutesLesCollectivites/ToutesLesCollectivitesPage.tsx

@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const ToutesLesCollectivites = lazy(

app.territoiresentransitions.react/src/app/pages/collectivite/Accueil/AccueilPage.tsx

@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const Accueil = lazy(() => import('app/pages/collectivite/Accueil/Accueil'));

app.territoiresentransitions.react/src/app/pages/collectivite/BibliothequeDocs/BibliothequeDocsPage.tsx

@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const BibliothequeDocs = lazy(

app.territoiresentransitions.react/src/app/pages/collectivite/Historique/JournalActivitePage.tsx

@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const JournalActivite = lazy(

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/IndicateursPage.tsx

@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const Indicateurs = lazy(

app.territoiresentransitions.react/src/app/pages/collectivite/ParcoursLabellisation/ParcoursLabellisationPage.tsx

@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const ParcoursLabellisation = lazy(

app.territoiresentransitions.react/src/app/pages/collectivite/PersoReferentiel/PersoReferentielPage.tsx

@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const PersoReferentiel = lazy(

app.territoiresentransitions.react/src/app/pages/collectivite/PersoReferentielThematique/PersoReferentielThematiquePage.tsx

@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const PersoReferentielThematique = lazy(

app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/FicheAction/FicheActionPage.tsx

@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const FicheAction = lazy(

app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/ParcoursCreationPlan/CreerPlanPage.tsx

@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const CreerPlan = lazy(

app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/ParcoursCreationPlan/ImporterPlanPage.tsx

@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const ImporterPlan = lazy(

app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/ParcoursCreationPlan/SelectionPage.tsx

@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const Selection = lazy(

app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/PlanAction/PlanActionPage.tsx

@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const PlanAction = lazy(

app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/PlansActionsPage.tsx

@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const PlansActions = lazy(

app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/Synthese/SynthesePage.tsx

@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const Synthese = lazy(

app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/Synthese/SyntheseVue/SyntheseVuePage.tsx

@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const Vue = lazy(

app.territoiresentransitions.react/src/app/pages/collectivite/Referentiels/ActionPage.tsx

@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {useParams} from 'react-router-dom';
 import {renderLoader} from 'utils/renderLoader';
 import {Referentiel} from 'types/litterals';

app.territoiresentransitions.react/src/app/pages/collectivite/Referentiels/ReferentielsPage.tsx

@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const ReferentielTabs = lazy(

app.territoiresentransitions.react/src/app/pages/collectivite/Users/MembresPage.tsx

@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 
 const Membres = lazy(() => import('app/pages/collectivite/Users/Membres'));

app.territoiresentransitions.react/src/ui/shared/actions/ActionPreuvePanel/index.tsx

@@ -1,4 +1,5 @@
-import {lazy, Suspense} from 'react';
+import {Suspense} from 'react';
+import {lazy} from 'utils/lazy';
 import {renderLoader} from 'utils/renderLoader';
 import {TActionPreuvePanelProps} from './ActionPreuvePanel';
 

app.territoiresentransitions.react/src/utils/lazy.ts

@@ -0,0 +1,35 @@
+import {ComponentType, lazy as originalLazy} from 'react';
+
+type ImportComponent = () => Promise<{default: ComponentType<any>}>;
+
+const FORCE_REFRESH = 'force-refresh';
+
+// Encapsule la fonction `React.lazy` pour faire un rechargement complet de la
+// page en cas d'erreur de chargement dynamique d'un composant, et ce afin
+// d'éviter les `ChunkLoadError` lors des mises à jour du front.
+// Ref: https://gist.github.com/raphael-leger/4d703dea6c845788ff9eb36142374bdb#file-lazywithretry-js
+export const lazy = (importComponent: ImportComponent) =>
+  originalLazy((async () => {
+    // vérifie si on a déjà forcé le rechargement complet
+    const isPageHasBeenForceRefreshed = JSON.parse(
+      localStorage.getItem(FORCE_REFRESH) || 'false'
+    );
+
+    try {
+      // essaye de charger le composant
+      const component = await importComponent();
+
+      localStorage.setItem(FORCE_REFRESH, 'false');
+
+      return component;
+    } catch (error) {
+      // en cas d'erreur on essaye de faire un rechargement complet de la page
+      // si ça n'a pas déjà été tenté
+      if (!isPageHasBeenForceRefreshed) {
+        localStorage.setItem(FORCE_REFRESH, 'true');
+        return document.location.reload();
+      }
+
+      throw error;
+    }
+  }) as ImportComponent);