fix: replace react-router-dom with @equinor/fusion-framework-react-router in state-replication cookbook

The cookbook mixed react-router-dom's RouterProvider with the router
instance returned by useRouter (@equinor/fusion-framework-react-app),
which internally uses @remix-run/router via the navigation module.
The mismatched react-router runtimes caused a crash in useRoutesImpl
at render time. Also clean up remaining biome lint issues (unused
imports/vars, array index keys, banned {} type) left over from the
earlier fusion-lint cleanup pass.

Author: odinr

.changeset/cookbook-app-react-state-replication_fix-router-runtime-crash.md

@@ -0,0 +1,5 @@
+---
+"@equinor/fusion-framework-cookbook-app-react-state-replication": patch
+---
+
+Fix a runtime crash on route render caused by mixing `react-router-dom`'s `RouterProvider` with the router instance returned by `useRouter` from `@equinor/fusion-framework-react-app/navigation`. The router and route components now come from `@equinor/fusion-framework-react-router`, matching the react-router runtime used internally by the framework's navigation module.

cookbooks/app-react-state-replication/package.json

@@ -26,16 +26,15 @@
     "@equinor/fusion-framework-module-navigation": "workspace:^",
     "@equinor/fusion-framework-module-state": "workspace:^",
     "@equinor/fusion-framework-react-app": "workspace:^",
+    "@equinor/fusion-framework-react-router": "workspace:^",
     "@equinor/fusion-observable": "workspace:^",
     "@types/pouchdb": "^6.4.2",
     "@types/react": "^18.2.50",
     "@types/react-dom": "^18.2.7",
-    "@types/react-router-dom": "^5.3.3",
     "@types/uuid": "^10.0.0",
     "pouchdb": "^9.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^7.8.2",
     "rxjs": "^7.8.1",
     "styled-components": "^6.0.7",
     "typescript": "^5.8.2",

cookbooks/app-react-state-replication/src/Router.tsx

@@ -1,4 +1,5 @@
-import { RouterProvider, type RouteObject } from 'react-router-dom';
+import { RouterProvider } from '@equinor/fusion-framework-react-router/interop';
+import type { RouteObject } from '@equinor/fusion-framework-react-router';
 import { useRouter } from '@equinor/fusion-framework-react-app/navigation';
 
 import { Home, Profile, Root, Todo } from './pages';
@@ -24,7 +25,8 @@ const routes: RouteObject[] = [
   },
 ];
 
-export default function () {
-  const router = useRouter(routes as any[]);
-  return <RouterProvider router={router as any} />;
+/** Renders the application's route tree via the Fusion navigation module. */
+export default function Router() {
+  const router = useRouter(routes);
+  return <RouterProvider router={router} />;
 }

cookbooks/app-react-state-replication/src/components/SyncEvents/SyncEventList.tsx

@@ -1,7 +1,5 @@
 import { Typography } from '@equinor/eds-core-react';
 
-import type { SyncEvent } from '../../modules/app-state-with-replication';
-
 import { SyncStatusIndicator } from './SyncStatusIndicator';
 import { useSyncEvents } from './useSyncEvents';
 
@@ -28,7 +26,7 @@ export const SyncEventList: React.FC<SyncEventListProps> = ({
             .reverse()
             .map((event, index) => (
               <div
-                key={`${event.timestamp}-${index}`}
+                key={event.id}
                 style={{
                   display: 'flex',
                   alignItems: 'center',

cookbooks/app-react-state-replication/src/components/Todo/TodoListManager.tsx

@@ -68,10 +68,10 @@ export const TodoListManager = () => {
           items: prev.items
             // Update only the selected item while preserving the list order.
             .map((item) =>
-            item.id === id
-              ? { ...item, completed: !item.completed, updatedAt: new Date().toISOString() }
-              : item,
-          ),
+              item.id === id
+                ? { ...item, completed: !item.completed, updatedAt: new Date().toISOString() }
+                : item,
+            ),
           lastModified: new Date().toISOString(),
         };
       });

cookbooks/app-react-state-replication/src/modules/app-state-with-replication/ObserveSync.ts

@@ -37,14 +37,14 @@ export function ObserveSync<T extends {}>(
 
     // Register every replication callback so consumers receive a complete event history.
     for (const [key, handler] of Object.entries(handlers)) {
-      // @ts-ignore
+      // @ts-expect-error
       sync.on(key, handler);
     }
 
     return () => {
       // Remove every callback when the observable subscription is disposed.
       for (const [key, handler] of Object.entries(handlers)) {
-        // @ts-ignore
+        // @ts-expect-error
         sync.off(key, handler);
       }
     };

cookbooks/app-react-state-replication/src/modules/app-state-with-replication/enable-module.ts

@@ -1,4 +1,4 @@
-import type { AnyModule, IModulesConfigurator } from '@equinor/fusion-framework-module';
+import type { AnyModule } from '@equinor/fusion-framework-module';
 import type { IAppConfigurator } from '@equinor/fusion-framework-react-app';
 
 import type { StateWithReplicaConfigurator } from './configurator';

cookbooks/app-react-state-replication/src/modules/app-state-with-replication/types.ts

@@ -1,4 +1,4 @@
-export type SyncEvent<Content extends {} = {}> = {
+export type SyncEvent<Content extends object = object> = {
   id: string;
   type: 'change' | 'complete' | 'error' | 'denied' | 'paused' | 'active';
   info?: PouchDB.Replication.SyncResult<Content>;

cookbooks/app-react-state-replication/src/pages/Root.tsx

@@ -1,4 +1,4 @@
-import { Link, Outlet, useLocation } from 'react-router-dom';
+import { Link, Outlet, useLocation } from '@equinor/fusion-framework-react-router';
 
 import { SyncStatusMonitor } from '../components/SyncEvents/SyncStatusMonitor';
 

cookbooks/app-react-state-replication/tsconfig.json

@@ -6,7 +6,10 @@
     "jsx": "react-jsx",
     "baseUrl": "./src"
   },
-  "references": [{ "path": "../../packages/modules/state" }],
+  "references": [
+    { "path": "../../packages/modules/state" },
+    { "path": "../../packages/react/router" }
+  ],
   "include": ["src/**/*"],
   "exclude": ["node_modules", "dist"]
 }