a2nr
/
velxio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(picker): declare the version hooks BEFORE the memos that list them as deps 

filteredComponents' new registryVersion dep evaluated in its useMemo deps
array while the const was still in the temporal dead zone (declared further
down the component) — 'Cannot access N before initialization', white screen
on every page. Hooks moved up next to the registry declaration.
This commit is contained in:
David Montero Crespo 2026-07-23 07:20:34 +02:00
parent 5beccf94a6
commit c6ec887a21
1 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/components/ComponentPickerModal.tsx
View File

@ -141,6 +141,22 @@ export const ComponentPickerModal: React.FC<ComponentPickerModalProps> = ({
'all', 'all',
); );
const [registry] = useState(() => ComponentRegistry.getInstance()); const [registry] = useState(() => ComponentRegistry.getInstance());
// Late-overlay registrations must re-render an already-mounted picker:
// the @pro import is dynamic, so boards/components can register AFTER the
// first render. Without these subscriptions the memos below freeze on the
// pre-registration state (boards missing, ONLINE ads instead of the real
// components - and which one you got depended on a reload race).
const proBoardsVersion = useSyncExternalStore(
subscribeProBoards,
getProBoardsVersion,
getProBoardsVersion,
);
const registryVersion = useSyncExternalStore(
registry.subscribe,
registry.getVersion,
registry.getVersion,
);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
// Floating datasheet popover shown on card hover. A single instance is // Floating datasheet popover shown on card hover. A single instance is
// driven from here so only one panel ever exists in the DOM. Hiding is // driven from here so only one panel ever exists in the DOM. Hiding is
@ -212,21 +228,6 @@ export const ComponentPickerModal: React.FC<ComponentPickerModalProps> = ({
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [searchQuery, selectedCategory, registry, isLoading, registryVersion]); }, [searchQuery, selectedCategory, registry, isLoading, registryVersion]);
// Late-overlay registrations must re-render an already-mounted picker:
// the @pro import is dynamic, so boards/components can register AFTER the
// first render. Without these subscriptions the memos below freeze on the
// pre-registration state (boards missing, ONLINE ads instead of the real
// components - and which one you got depended on a reload race).
const proBoardsVersion = useSyncExternalStore(
subscribeProBoards,
getProBoardsVersion,
getProBoardsVersion,
);
const registryVersion = useSyncExternalStore(
registry.subscribe,
registry.getVersion,
registry.getVersion,
);
// Boards list: static OSS kinds + overlay-registered boards (proBoardRegistry). // Boards list: static OSS kinds + overlay-registered boards (proBoardRegistry).
const allBoards = useMemo(() => { const allBoards = useMemo(() => {