From 7eb18b15b864a997005d9c941b22f1b4579c4c42 Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 17 May 2026 18:36:40 +0200 Subject: [PATCH] fix(rsc): add "use client" directive to all client-interactive files MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 50 .tsx components and 6 .ts hook files use React client APIs (createContext, useState, useEffect, useRef, useMemo, useCallback, forwardRef, etc.) but lacked the "use client" directive at the top of the source file. tsc-emitted dist files therefore also lacked it. Older Next.js / Turbopack versions traversed the import graph and implicitly treated the imports as client when their consumer was a client component. Next.js 16's stricter Turbopack rejects this: any file that touches client-only React APIs must declare "use client" explicitly, regardless of where it is imported from. Symptom in consumers (gscSupport build, 2026-05-17): ./templates/limitless-ui/dist/theme/ThemeProvider.js:2:10 You're importing a module that depends on `createContext` into a React Server Component module. This API is only available in Client Components. To fix, mark the file (or its parent) with the `"use client"` directive. Adding the directive at source-file level cascades through tsc into the emitted dist/ — verified gscSupport + gscCRM build cleanly after this change. Affected files (50 total): src/theme/ThemeProvider.tsx src/hooks/useDisclosure.ts src/components/{Accordion,Carousel,DualListBox,Form,Wizard,…}.tsx src/validation/hooks/{useValidation,useFieldValidation,…}.ts src/genui/hooks/{useGenUI,useWebMCP}.ts ... and more — every component that touches createContext / a React hook now self-declares as client. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/components/Accordion.tsx | 2 ++ src/components/Button.tsx | 2 ++ src/components/Calendar.tsx | 2 ++ src/components/Carousel.tsx | 2 ++ src/components/ContextMenu.tsx | 2 ++ src/components/DataTable.tsx | 2 ++ src/components/Dropdown.tsx | 2 ++ src/components/DualListBox.tsx | 2 ++ src/components/Embed.tsx | 2 ++ src/components/FAB.tsx | 2 ++ src/components/FileUpload.tsx | 2 ++ src/components/Form.tsx | 2 ++ src/components/Gallery.tsx | 2 ++ src/components/IdleTimeout.tsx | 2 ++ src/components/ImageCropper.tsx | 2 ++ src/components/Modal.tsx | 2 ++ src/components/Notification.tsx | 2 ++ src/components/Offcanvas.tsx | 2 ++ src/components/Pills.tsx | 2 ++ src/components/Popover.tsx | 2 ++ src/components/Rating.tsx | 2 ++ src/components/Scrollspy.tsx | 2 ++ src/components/Slider.tsx | 2 ++ src/components/Sortable.tsx | 2 ++ src/components/Stepper.tsx | 2 ++ src/components/SweetAlert.tsx | 2 ++ src/components/SyntaxHighlighter.tsx | 2 ++ src/components/Tabs.tsx | 2 ++ src/components/TagInput.tsx | 2 ++ src/components/Toast.tsx | 2 ++ src/components/Tooltip.tsx | 2 ++ src/components/TreeView.tsx | 2 ++ src/components/Widget/index.tsx | 2 ++ src/components/Wizard.tsx | 2 ++ src/genui/hooks/useGenUI.ts | 2 ++ src/genui/hooks/useWebMCP.ts | 2 ++ src/hooks/useDisclosure.ts | 2 ++ src/layout/Sidebar.tsx | 2 ++ src/pages/Auth.tsx | 2 ++ src/pages/Chat.tsx | 2 ++ src/pages/Error.tsx | 2 ++ src/pages/Invoice.tsx | 2 ++ src/pages/Mail.tsx | 2 ++ src/pages/Search.tsx | 2 ++ src/pages/TaskManager.tsx | 2 ++ src/pages/UserProfile.tsx | 2 ++ src/theme/ThemeProvider.tsx | 2 ++ src/validation/hooks/useAddressAutocomplete.ts | 2 ++ src/validation/hooks/useFieldValidation.ts | 2 ++ src/validation/hooks/useValidation.ts | 2 ++ 50 files changed, 100 insertions(+) diff --git a/src/components/Accordion.tsx b/src/components/Accordion.tsx index 259c6e6..1ebbbea 100644 --- a/src/components/Accordion.tsx +++ b/src/components/Accordion.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { createContext, useContext, useState } from 'react'; import { Collapse } from './Collapse'; diff --git a/src/components/Button.tsx b/src/components/Button.tsx index b0452a8..3ef2d21 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -1,3 +1,5 @@ +"use client"; + import React from 'react'; export type ButtonVariant = diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx index 1ac5bea..2e564cd 100644 --- a/src/components/Calendar.tsx +++ b/src/components/Calendar.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState, useMemo, useCallback } from 'react'; export interface CalendarEvent { diff --git a/src/components/Carousel.tsx b/src/components/Carousel.tsx index 41419f1..f5ed4b6 100644 --- a/src/components/Carousel.tsx +++ b/src/components/Carousel.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState, useEffect, useCallback, useRef } from 'react'; export interface CarouselItem { diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx index eaea7a2..24d4c42 100644 --- a/src/components/ContextMenu.tsx +++ b/src/components/ContextMenu.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState, useRef, useEffect, useCallback } from 'react'; export interface ContextMenuItem { diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx index 8ac30cb..e36bb4a 100644 --- a/src/components/DataTable.tsx +++ b/src/components/DataTable.tsx @@ -1,3 +1,5 @@ +"use client"; + import React from 'react'; import { ColumnDef, diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx index 7cc12d5..722be65 100644 --- a/src/components/Dropdown.tsx +++ b/src/components/Dropdown.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useEffect, useRef, useState } from 'react'; export type DropdownProps = { diff --git a/src/components/DualListBox.tsx b/src/components/DualListBox.tsx index 2bbc029..9a1eb9f 100644 --- a/src/components/DualListBox.tsx +++ b/src/components/DualListBox.tsx @@ -1,3 +1,5 @@ +"use client"; + import React from 'react'; import { Button } from './Button'; diff --git a/src/components/Embed.tsx b/src/components/Embed.tsx index 0bccca9..339a884 100644 --- a/src/components/Embed.tsx +++ b/src/components/Embed.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState, useEffect, useRef } from 'react'; export interface EmbedProps { diff --git a/src/components/FAB.tsx b/src/components/FAB.tsx index 60baa8d..90eaa6e 100644 --- a/src/components/FAB.tsx +++ b/src/components/FAB.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState } from 'react'; export interface FABAction { diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx index e9cd104..2ac250e 100644 --- a/src/components/FileUpload.tsx +++ b/src/components/FileUpload.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState, useRef, useCallback, DragEvent, ChangeEvent } from 'react'; export interface UploadFile { diff --git a/src/components/Form.tsx b/src/components/Form.tsx index c83d5f3..1c17e40 100644 --- a/src/components/Form.tsx +++ b/src/components/Form.tsx @@ -1,3 +1,5 @@ +"use client"; + import React from 'react'; export type FormGroupProps = { diff --git a/src/components/Gallery.tsx b/src/components/Gallery.tsx index 5308e05..13f0a5e 100644 --- a/src/components/Gallery.tsx +++ b/src/components/Gallery.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState, useCallback, useEffect } from 'react'; export interface GalleryItem { diff --git a/src/components/IdleTimeout.tsx b/src/components/IdleTimeout.tsx index b8d1e1f..d698536 100644 --- a/src/components/IdleTimeout.tsx +++ b/src/components/IdleTimeout.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState, useEffect, useCallback, useRef } from 'react'; export interface IdleTimeoutProps { diff --git a/src/components/ImageCropper.tsx b/src/components/ImageCropper.tsx index f8ea14d..78a4278 100644 --- a/src/components/ImageCropper.tsx +++ b/src/components/ImageCropper.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState, useRef, useCallback, useEffect } from 'react'; export interface CropArea { diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx index efdb353..2401702 100644 --- a/src/components/Modal.tsx +++ b/src/components/Modal.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useEffect } from 'react'; import { createPortal } from 'react-dom'; diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx index caadfa2..438f220 100644 --- a/src/components/Notification.tsx +++ b/src/components/Notification.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState, useEffect, useCallback, useRef } from 'react'; export type NotificationType = 'success' | 'error' | 'warning' | 'info' | 'default'; diff --git a/src/components/Offcanvas.tsx b/src/components/Offcanvas.tsx index 07755d2..d3d0235 100644 --- a/src/components/Offcanvas.tsx +++ b/src/components/Offcanvas.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useEffect, useRef, useCallback } from 'react'; export interface OffcanvasProps { diff --git a/src/components/Pills.tsx b/src/components/Pills.tsx index 26d0dc2..a751e0d 100644 --- a/src/components/Pills.tsx +++ b/src/components/Pills.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState } from 'react'; export interface PillItem { diff --git a/src/components/Popover.tsx b/src/components/Popover.tsx index 81ce994..37223d4 100644 --- a/src/components/Popover.tsx +++ b/src/components/Popover.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState } from 'react'; import { useFloating, offset, shift, flip, arrow, Placement, Middleware } from '@floating-ui/react'; diff --git a/src/components/Rating.tsx b/src/components/Rating.tsx index b0dc8cf..b55e519 100644 --- a/src/components/Rating.tsx +++ b/src/components/Rating.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState, useCallback } from 'react'; export interface RatingProps { diff --git a/src/components/Scrollspy.tsx b/src/components/Scrollspy.tsx index 6642e8a..d46d15b 100644 --- a/src/components/Scrollspy.tsx +++ b/src/components/Scrollspy.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useEffect, useState } from 'react'; export type ScrollspyItem = { diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx index d4fd632..2918458 100644 --- a/src/components/Slider.tsx +++ b/src/components/Slider.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState, useRef, useCallback, useEffect } from 'react'; export interface SliderProps { diff --git a/src/components/Sortable.tsx b/src/components/Sortable.tsx index adfbb2e..e7b7d1b 100644 --- a/src/components/Sortable.tsx +++ b/src/components/Sortable.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState, useRef, useCallback, useEffect } from 'react'; export interface SortableItem { diff --git a/src/components/Stepper.tsx b/src/components/Stepper.tsx index bf88c39..71b9f89 100644 --- a/src/components/Stepper.tsx +++ b/src/components/Stepper.tsx @@ -1,3 +1,5 @@ +"use client"; + import React from 'react'; export interface StepItem { diff --git a/src/components/SweetAlert.tsx b/src/components/SweetAlert.tsx index f53f7b0..6882057 100644 --- a/src/components/SweetAlert.tsx +++ b/src/components/SweetAlert.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useEffect, useRef, useCallback } from 'react'; export type SweetAlertType = 'success' | 'error' | 'warning' | 'info' | 'question'; diff --git a/src/components/SyntaxHighlighter.tsx b/src/components/SyntaxHighlighter.tsx index 0c878d2..9caa3ca 100644 --- a/src/components/SyntaxHighlighter.tsx +++ b/src/components/SyntaxHighlighter.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState, useMemo, useCallback } from 'react'; export type Language = diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx index ad2f701..d81cef1 100644 --- a/src/components/Tabs.tsx +++ b/src/components/Tabs.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useMemo, useState } from 'react'; export type TabItem = { diff --git a/src/components/TagInput.tsx b/src/components/TagInput.tsx index e92aa72..7e8ad4b 100644 --- a/src/components/TagInput.tsx +++ b/src/components/TagInput.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState, useRef, useCallback, KeyboardEvent } from 'react'; export interface Tag { diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx index b8e7eb9..1c8073c 100644 --- a/src/components/Toast.tsx +++ b/src/components/Toast.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useEffect } from 'react'; export type ToastProps = { diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx index d351478..d445a0f 100644 --- a/src/components/Tooltip.tsx +++ b/src/components/Tooltip.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState } from 'react'; import { useFloating, offset, shift, flip, arrow, Placement, Middleware } from '@floating-ui/react'; diff --git a/src/components/TreeView.tsx b/src/components/TreeView.tsx index 00dcf54..fe44942 100644 --- a/src/components/TreeView.tsx +++ b/src/components/TreeView.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState, useCallback } from 'react'; export interface TreeNode { diff --git a/src/components/Widget/index.tsx b/src/components/Widget/index.tsx index 1322e8c..ff19e43 100644 --- a/src/components/Widget/index.tsx +++ b/src/components/Widget/index.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react'; // ============================================================================ diff --git a/src/components/Wizard.tsx b/src/components/Wizard.tsx index c09dddf..379ff72 100644 --- a/src/components/Wizard.tsx +++ b/src/components/Wizard.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useMemo, useState } from 'react'; import { Button } from './Button'; diff --git a/src/genui/hooks/useGenUI.ts b/src/genui/hooks/useGenUI.ts index 2ad0bfe..04bccfb 100644 --- a/src/genui/hooks/useGenUI.ts +++ b/src/genui/hooks/useGenUI.ts @@ -1,3 +1,5 @@ +"use client"; + /** * useGenUI Hook * diff --git a/src/genui/hooks/useWebMCP.ts b/src/genui/hooks/useWebMCP.ts index 60ef407..8d28891 100644 --- a/src/genui/hooks/useWebMCP.ts +++ b/src/genui/hooks/useWebMCP.ts @@ -1,3 +1,5 @@ +"use client"; + /** * useWebMCP Hook * diff --git a/src/hooks/useDisclosure.ts b/src/hooks/useDisclosure.ts index 963bc27..dee2034 100644 --- a/src/hooks/useDisclosure.ts +++ b/src/hooks/useDisclosure.ts @@ -1,3 +1,5 @@ +"use client"; + import { useCallback, useState } from 'react'; export function useDisclosure(initial = false) { diff --git a/src/layout/Sidebar.tsx b/src/layout/Sidebar.tsx index 0655ff3..8dee94e 100644 --- a/src/layout/Sidebar.tsx +++ b/src/layout/Sidebar.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState } from 'react'; export type SidebarNavItem = { diff --git a/src/pages/Auth.tsx b/src/pages/Auth.tsx index 31757d8..db2154e 100644 --- a/src/pages/Auth.tsx +++ b/src/pages/Auth.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState } from 'react'; // Base Auth Layout diff --git a/src/pages/Chat.tsx b/src/pages/Chat.tsx index 35b5087..60e8f43 100644 --- a/src/pages/Chat.tsx +++ b/src/pages/Chat.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState, useRef, useEffect, useCallback } from 'react'; // Types diff --git a/src/pages/Error.tsx b/src/pages/Error.tsx index 2bbefda..eb8c5b5 100644 --- a/src/pages/Error.tsx +++ b/src/pages/Error.tsx @@ -1,3 +1,5 @@ +"use client"; + import React from 'react'; // Base Error Layout diff --git a/src/pages/Invoice.tsx b/src/pages/Invoice.tsx index 6049149..3a9c1f3 100644 --- a/src/pages/Invoice.tsx +++ b/src/pages/Invoice.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState } from 'react'; // Types diff --git a/src/pages/Mail.tsx b/src/pages/Mail.tsx index 0f4c225..7a2c990 100644 --- a/src/pages/Mail.tsx +++ b/src/pages/Mail.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState, useCallback } from 'react'; // Types diff --git a/src/pages/Search.tsx b/src/pages/Search.tsx index cfd2279..d4e4175 100644 --- a/src/pages/Search.tsx +++ b/src/pages/Search.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState, useCallback } from 'react'; // Types diff --git a/src/pages/TaskManager.tsx b/src/pages/TaskManager.tsx index bfec363..601d2ed 100644 --- a/src/pages/TaskManager.tsx +++ b/src/pages/TaskManager.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState, useCallback } from 'react'; // Types diff --git a/src/pages/UserProfile.tsx b/src/pages/UserProfile.tsx index 92d61e5..b09cc71 100644 --- a/src/pages/UserProfile.tsx +++ b/src/pages/UserProfile.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { useState } from 'react'; // Types diff --git a/src/theme/ThemeProvider.tsx b/src/theme/ThemeProvider.tsx index 98537b4..35eeec9 100644 --- a/src/theme/ThemeProvider.tsx +++ b/src/theme/ThemeProvider.tsx @@ -1,3 +1,5 @@ +"use client"; + import React, { createContext, useContext, useEffect, useMemo, useState } from 'react'; export type LimitlessTheme = 'light' | 'dark' | 'material'; diff --git a/src/validation/hooks/useAddressAutocomplete.ts b/src/validation/hooks/useAddressAutocomplete.ts index 1ac0370..aaf7f12 100644 --- a/src/validation/hooks/useAddressAutocomplete.ts +++ b/src/validation/hooks/useAddressAutocomplete.ts @@ -1,3 +1,5 @@ +"use client"; + import { useState, useCallback, useRef, useEffect } from 'react'; import type { EuropeanAddress, AddressSuggestion, UseAddressAutocompleteOptions } from '../types'; diff --git a/src/validation/hooks/useFieldValidation.ts b/src/validation/hooks/useFieldValidation.ts index b9048e5..7b6223f 100644 --- a/src/validation/hooks/useFieldValidation.ts +++ b/src/validation/hooks/useFieldValidation.ts @@ -1,3 +1,5 @@ +"use client"; + import { useState, useCallback, useRef, useEffect } from 'react'; import type { ValidatorFn, diff --git a/src/validation/hooks/useValidation.ts b/src/validation/hooks/useValidation.ts index 17323cb..2fc110b 100644 --- a/src/validation/hooks/useValidation.ts +++ b/src/validation/hooks/useValidation.ts @@ -1,3 +1,5 @@ +"use client"; + import { useState, useCallback, useRef, useEffect, useMemo } from 'react'; import type { FormSchema,