Runtime Error
Tooltip must be used within TooltipProvider
at InstallTabs (components/InstallTabs.tsx:82:17) at undefined.Home (app/(home)/page.tsx:156:23) at processTicksAndRejections (<anonymous>:1:34)
80 | >
81 | {isSmall ? (
82 | <Tooltip>
| ^
83 | <TooltipTrigger asChild>
84 | <Link href="https://www.traces.com/install" target="_blank" rel="noreferrer">
85 | <Download className="text-icon-foreground size-3.5" />
Next.js version: 16.1.6 (Turbopack)
Locating tooltip provider
Locating tooltip component
Found 12 matches
/Users/maxgeorgopoulos/Documents/traces/frontend/components/ui/tooltip.tsx:
Line 8: const TooltipProvider = TooltipPrimitive.Provider
Line 34: export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
/Users/maxgeorgopoulos/Documents/traces/design/app/trace/[id]/components/blocks/BaseBlock.tsx:
Line 24: TooltipProvider,
Line 96: <TooltipProvider>
Line 154: </TooltipProvider>
/Users/maxgeorgopoulos/Documents/traces/design/app/trace/[id]/components/Chat.tsx:
Line 22: TooltipProvider,
Line 251: <TooltipProvider>
Line 266: </TooltipProvider>
Line 325: <TooltipProvider>
Line 338: </TooltipProvider>
/Users/maxgeorgopoulos/Documents/traces/design/components/ui/tooltip.tsx:
Line 8: const TooltipProvider = TooltipPrimitive.Provider
Line 34: export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }Locating provider usage in frontend layout
Found 2 matches
/Users/maxgeorgopoulos/Documents/traces/frontend/components/ui/tooltip.tsx:
Line 8: const TooltipProvider = TooltipPrimitive.Provider
Line 34: export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }Identifying provider wrapping point
I'm looking for the InstallTabs component to determine where to wrap the provider since there's currently no provider at the app level.
Adding TooltipProvider wrapper
Planning to wrap TooltipProvider around Tooltip usage in InstallTabs by importing it and applying it around the main content to ensure proper context for tooltips.
Wrapped the InstallTabs tooltip usage in a provider so the Tooltip context is available, fixing the runtime error in frontend/components/InstallTabs.tsx.
If you want to validate, try:
bun run devConsole Error
In HTML, <a> cannot be a descendant of <a>.
This will cause a hydration error.
...
<div className="mt-2">
<InstallTabs size="sm">
<TooltipProvider>
<TooltipProviderProvider scope={undefined} isOpenDelayedRef={{current:true}} delayDuration={700} ...>
<div className={"isolate ..."}>
<div className="w-full rou...">
<Tabs value="brew" onValueChange={function onValueChange} className="flex flex-col">
<TabsProvider scope={undefined} baseId="radix-r_2" value="brew" ...>
<Primitive.div dir="ltr" data-orientation="horizontal" className="flex flex-col" ref={null}>
<div dir="ltr" data-orientation="horizontal" className="flex flex-col" ref={null}>
<div className="flex items...">
<_c>
<LinkComponent href="https://ww..." target="_blank" rel="noreferrer" className="text-[11px..." ...>
<a
target="_blank"
rel="noreferrer"
className="text-[11px] py-1.5 text-muted-foreground hover:text-foreground motion-safe:tr..."
aria-hidden={true}
tabIndex={-1}
ref={function}
onClick={function onClick}
onMouseEnter={function onMouseEnter}
onTouchStart={function onTouchStart}
href="https://www.traces.com/install"
>
...
<Primitive.button.SlotClone aria-describedby={undefined} data-state="closed" ...>
<LinkComponent href="https://ww..." target="_blank" rel="noreferrer" ...>
<a
target="_blank"
rel="noreferrer"
aria-describedby={undefined}
data-state="closed"
onPointerMove={function handleEvent}
onPointerLeave={function handleEvent}
onPointerDown={function handleEvent}
onFocus={function handleEvent}
onBlur={function handleEvent}
ref={function}
onClick={function onClick}
onMouseEnter={function onMouseEnter}
onTouchStart={function onTouchStart}
href="https://www.traces.com/install"
>
...
at a (<anonymous>:null:null) at undefined.Home (app/(home)/page.tsx:156:23) at processTicksAndRejections (<anonymous>:1:34)
154 | aria-hidden="true"
155 | />
156 | <HomeOnboardingWizard />
| ^
157 | <div className="flex flex-col w-full px-4 md:px-6 lg:px-12 pt-12 pb-12 relative overflow-hidden">
158 | <div className="relative flex flex-col gap-12 w-full lg:max-w-4xl mx-auto">
159 | <div className="py-4">
Next.js version: 16.1.6 (Turbopack)
Fixing nested links by conditional wrapper
Plan to replace the outer Link with a span or div in small mode to avoid nested links, keeping the outer Link only in non-small mode for the "View script" text, and adjusting accessibility accordingly before patching.
Fixed the nested anchor issue by only rendering a real link for the non-small “View script” case and using a span wrapper for the tooltip icon in small mode. Update is in frontend/components/InstallTabs.tsx.
If you want to verify, reload the home page and check the console for hydration warnings.