docs: fix client error for learning path (#10102)

www/apps/book/components/Homepage/LinksSection/index.tsx

@@ -84,7 +84,12 @@ const Section = ({ title, links }: SectionProps) => {
     <div className="flex flex-col gap-0.5 flex-1">
       <h3 className="text-h3 text-medusa-fg-base">{title}</h3>
       {links.map((link, index) => (
-        <Link key={index} className="text-compact-small-plus" href={link.href}>
+        <Link
+          key={index}
+          className="text-compact-small-plus"
+          href={link.href}
+          prefetch={false}
+        >
           {link.text}
         </Link>
       ))}

www/apps/book/providers/index.tsx

@@ -32,7 +32,7 @@ const Providers = ({ children }: ProvidersProps) => {
                       <HooksLoader
                         options={{
                           pageScrollManager: true,
-                          currentLearningPath: true,
+                          currentLearningPath: false,
                         }}
                       >
                         {children}

www/packages/docs-ui/src/components/Card/Layout/Default/index.tsx

@@ -68,6 +68,7 @@ export const CardDefaultLayout = ({
         <Link
           href={href}
           className="absolute left-0 top-0 h-full w-full rounded"
+          prefetch={false}
         />
       )}
     </div>

www/packages/docs-ui/src/components/Card/Layout/Large/index.tsx

@@ -61,6 +61,7 @@ export const CardLargeLayout = ({
         <Link
           href={href}
           className="absolute left-0 top-0 h-full w-full rounded"
+          prefetch={false}
         />
       )}
     </div>

www/packages/docs-ui/src/components/Card/Layout/Mini/index.tsx

@@ -89,7 +89,11 @@ export const CardLayoutMini = ({
           {isExternal ? <ArrowUpRightOnBox /> : <TriangleRightMini />}
         </span>
         {href && (
-          <Link href={href} className="absolute left-0 top-0 w-full h-full" />
+          <Link
+            href={href}
+            className="absolute left-0 top-0 w-full h-full"
+            prefetch={false}
+          />
         )}
       </div>
     </div>

www/packages/docs-ui/src/components/Notification/Item/index.tsx

@@ -1,6 +1,10 @@
+"use client"
+
 import clsx from "clsx"
-import React, { Children, ReactElement } from "react"
+import React, { Children, ReactElement, useRef } from "react"
 import { NotificationItemLayoutDefault } from "./Layout/Default"
+// @ts-expect-error can't install the types package because it doesn't support React v19
+import { CSSTransition } from "react-transition-group"
 
 export type NotificationItemProps = {
   layout?: "default" | "empty"
@@ -16,17 +20,14 @@ export type NotificationItemProps = {
   setShow?: (value: boolean) => void
   onClose?: () => void
   closeButtonText?: string
+  passRef?: React.RefObject<HTMLDivElement>
 } & React.HTMLAttributes<HTMLDivElement>
 
 type EmptyLayoutProps = {
   onClose?: () => void
 }
 
-export const NotificationItem = React.forwardRef<
+export const NotificationItem = ({
-  HTMLDivElement,
-  NotificationItemProps
->(function NotificationItem(
-  {
   className = "",
   placement = "bottom",
   show = true,
@@ -35,15 +36,22 @@ export const NotificationItem = React.forwardRef<
   onClose,
   children,
   ...rest
-  },
+}: NotificationItemProps) => {
-  ref
+  const ref = useRef<HTMLDivElement>(null)
-) {
   const handleClose = () => {
     setShow?.(false)
     onClose?.()
   }
 
   return (
+    <CSSTransition
+      timeout={200}
+      classNames={{
+        enter: "animate-slideInRight animate-fast",
+        exit: "animate-slideOutRight animate-fast",
+      }}
+      nodeRef={ref}
+    >
       <div
         className={clsx(
           "md:max-w-[320px] md:w-[320px] w-full",
@@ -76,5 +84,6 @@ export const NotificationItem = React.forwardRef<
             }
           })}
       </div>
+    </CSSTransition>
   )
-})
+}

www/packages/docs-ui/src/components/Notification/index.tsx

@@ -5,25 +5,16 @@ import {
   NotificationItemType,
   useNotifications,
 } from "@/providers"
-import React, { useEffect, useRef } from "react"
+import React from "react"
 import { NotificationItem } from "./Item"
 // @ts-expect-error can't install the types package because it doesn't support React v19
-import { CSSTransition, TransitionGroup } from "react-transition-group"
+import { TransitionGroup } from "react-transition-group"
 import clsx from "clsx"
 
 export const NotificationContainer = () => {
   const { notifications, removeNotification } =
     useNotifications() as NotificationContextType
 
-  const notificationRefs = useRef([])
-
-  useEffect(() => {
-    notificationRefs.current = notificationRefs.current.slice(
-      0,
-      notifications.length
-    )
-  }, [notifications])
-
   const handleClose = (notification: NotificationItemType) => {
     notification.onClose?.()
     if (notification.id) {
@@ -45,26 +36,16 @@ export const NotificationContainer = () => {
           className
         )}
       >
-        {notifications.filter(condition).map((notification, index) => (
+        {notifications.filter(condition).map((notification) => (
-          <CSSTransition
-            key={notification.id}
-            timeout={200}
-            classNames={{
-              enter: "animate-slideInRight animate-fast",
-              exit: "animate-slideOutRight animate-fast",
-            }}
-            nodeRef={notificationRefs.current[index]}
-          >
           <NotificationItem
             {...notification}
             onClose={() => handleClose(notification)}
-              ref={notificationRefs.current[index]}
             className={clsx(
               notification.className,
               "!relative !top-0 !bottom-0 !right-0"
             )}
+            key={notification.id}
           />
-          </CSSTransition>
         ))}
       </TransitionGroup>
     )