Refinements after React Router v7 migration (#902)

Author: nichtsam

app/components/progress-bar.tsx

@@ -1,5 +1,5 @@
-import { useNavigation } from 'react-router'
 import { useEffect, useRef, useState } from 'react'
+import { useNavigation } from 'react-router'
 import { useSpinDelay } from 'spin-delay'
 import { cn } from '#app/utils/misc.tsx'
 import { Icon } from './ui/icon.tsx'

app/root.tsx

@@ -1,4 +1,3 @@
-import { wrapUseRoutesV7 } from '@sentry/react'
 import { useRef } from 'react'
 import {
 	data,
@@ -270,7 +269,7 @@ function AppWithProviders() {
 	)
 }
 
-export default wrapUseRoutesV7(AppWithProviders)
+export default AppWithProviders
 
 function UserDropdown() {
 	const user = useUser()

app/utils/client-hints.tsx

@@ -8,8 +8,8 @@ import {
 	subscribeToSchemeChange,
 } from '@epic-web/client-hints/color-scheme'
 import { clientHint as timeZoneHint } from '@epic-web/client-hints/time-zone'
-import { useRevalidator } from 'react-router'
 import * as React from 'react'
+import { useRevalidator } from 'react-router'
 import { useOptionalRequestInfo, useRequestInfo } from './request-info.ts'
 
 const hintsUtils = getHintUtils({

app/utils/misc.tsx

@@ -1,6 +1,6 @@
-import { useFormAction, useNavigation } from 'react-router'
 import { clsx, type ClassValue } from 'clsx'
 import { useEffect, useMemo, useRef, useState } from 'react'
+import { useFormAction, useNavigation } from 'react-router'
 import { useSpinDelay } from 'spin-delay'
 import { extendTailwindMerge } from 'tailwind-merge'
 import { extendedTheme } from './extended-theme.ts'

eslint.config.js

@@ -8,4 +8,7 @@ export default [
 		files: ['**/tests/**/*.ts'],
 		rules: { 'react-hooks/rules-of-hooks': 'off' },
 	},
+	{
+		ignores: ['.react-router/*'],
+	},
 ]

react-router.config.ts

@@ -2,4 +2,8 @@ import { type Config } from '@react-router/dev/config'
 export default {
 	// Defaults to true. Set to false to enable SPA for all routes.
 	ssr: true,
+
+	future: {
+		unstable_optimizeDeps: true,
+	},
 } satisfies Config