Remove dynamic import wrapper causing webpack errors

app/list/[id]/page.tsx

@@ -6,7 +6,7 @@ import { notFound } from 'next/navigation'
 import Link from 'next/link'
 import { ArrowLeft } from 'lucide-react'
 import InlineItemCreate from '@/components/InlineItemCreate'
-import ListDetailView from '@/components/ClientListDetailView'
+import ListDetailView from '@/components/ListDetailView'
 
 export const dynamic = 'force-dynamic'
 export const revalidate = 0

components/ClientListDetailView.tsx

@@ -1,18 +0,0 @@
-'use client'
-
-import dynamic from 'next/dynamic'
-
-const ListDetailView = dynamic(() => import('./ListDetailView'), {
-  ssr: false,
-  loading: () => <div className="animate-pulse space-y-4">
-    <div className="h-8 bg-gray-200 rounded w-1/4"></div>
-    <div className="h-10 bg-gray-200 rounded"></div>
-    <div className="space-y-2">
-      <div className="h-16 bg-gray-200 rounded"></div>
-      <div className="h-16 bg-gray-200 rounded"></div>
-      <div className="h-16 bg-gray-200 rounded"></div>
-    </div>
-  </div>
-})
-
-export default ListDetailView

components/ListDetailView.tsx

@@ -66,15 +66,13 @@ export default function ListDetailView({
   ownerEmail = '',
   collaborators = []
 }: ListDetailViewProps) {
-  const [mounted, setMounted] = useState(false)
+
   const [searchResults, setSearchResults] = useState<ItemWithList[]>([])
   const [isSearching, setIsSearching] = useState(false)
   const [filteredItems, setFilteredItems] = useState<Item[]>(initialItems)
   const [isShareModalOpen, setIsShareModalOpen] = useState(false)
 
-  useEffect(() => {
+
-    setMounted(true)
-  }, [])
 
   // Use scroll position preservation hook
   useScrollPosition({ key: `list-${listId}` })