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,65 +20,70 @@ 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,
+  className = "",
-  NotificationItemProps
+  placement = "bottom",
->(function NotificationItem(
+  show = true,
-  {
+  layout = "default",
-    className = "",
+  setShow,
-    placement = "bottom",
+  onClose,
-    show = true,
+  children,
-    layout = "default",
+  ...rest
-    setShow,
+}: NotificationItemProps) => {
-    onClose,
+  const ref = useRef<HTMLDivElement>(null)
-    children,
-    ...rest
-  },
-  ref
-) {
   const handleClose = () => {
     setShow?.(false)
     onClose?.()
   }
 
   return (
-    <div
+    <CSSTransition
-      className={clsx(
+      timeout={200}
-        "md:max-w-[320px] md:w-[320px] w-full",
+      classNames={{
-        "fixed md:right-docs_1 left-0 md:m-docs_1",
+        enter: "animate-slideInRight animate-fast",
-        placement === "bottom" && "md:bottom-docs_1 bottom-0",
+        exit: "animate-slideOutRight animate-fast",
-        placement === "top" && "md:top-docs_1 top-0",
+      }}
-        "opacity-100 transition-opacity duration-200 ease-ease",
+      nodeRef={ref}
-        !show && "!opacity-0",
-        className
-      )}
-      ref={ref}
     >
-      {layout === "default" && (
+      <div
-        <NotificationItemLayoutDefault {...rest} handleClose={handleClose}>
+        className={clsx(
-          {children}
+          "md:max-w-[320px] md:w-[320px] w-full",
-        </NotificationItemLayoutDefault>
+          "fixed md:right-docs_1 left-0 md:m-docs_1",
-      )}
+          placement === "bottom" && "md:bottom-docs_1 bottom-0",
-      {layout === "empty" &&
+          placement === "top" && "md:top-docs_1 top-0",
-        Children.map(children, (child) => {
+          "opacity-100 transition-opacity duration-200 ease-ease",
-          if (child) {
+          !show && "!opacity-0",
-            return React.cloneElement<EmptyLayoutProps>(
+          className
-              child as React.ReactElement<
+        )}
-                EmptyLayoutProps,
+        ref={ref}
-                React.FunctionComponent<EmptyLayoutProps>
+      >
-              >,
+        {layout === "default" && (
-              {
+          <NotificationItemLayoutDefault {...rest} handleClose={handleClose}>
-                onClose: handleClose,
+            {children}
-              }
+          </NotificationItemLayoutDefault>
-            )
+        )}
-          }
+        {layout === "empty" &&
-        })}
+          Children.map(children, (child) => {
-    </div>
+            if (child) {
+              return React.cloneElement<EmptyLayoutProps>(
+                child as React.ReactElement<
+                  EmptyLayoutProps,
+                  React.FunctionComponent<EmptyLayoutProps>
+                >,
+                {
+                  onClose: handleClose,
+                }
+              )
+            }
+          })}
+      </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
+          <NotificationItem
+            {...notification}
+            onClose={() => handleClose(notification)}
+            className={clsx(
+              notification.className,
+              "!relative !top-0 !bottom-0 !right-0"
+            )}
             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"
-              )}
-            />
-          </CSSTransition>
         ))}
       </TransitionGroup>
     )