Repo Map Hangs on Reactjs Typescript File

[tylergets]

Issue

Hey there, I am trying to use Aider however its failing on my project to build its repo map.

The specific file that fils is:

"use client";

import {
	CreateOrganization,
	OrganizationSelect,
} from "@/components/create-org";
import Form, { useForm } from "@/components/form";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Spinner } from "@/components/ui/spinner";
import UserAvatar from "@/components/user-avatar";
import { useOrganizationList, useUser } from "@clerk/nextjs";
import { OrganizationMembershipResource } from "@clerk/types";
import { UploadIcon } from "lucide-react";
import { useEffect, useState } from "react";
import { toast } from "sonner";
import { z } from "zod";

import { SettingsSection } from "@/components/settings-section";

const accountSchema = z.object({
	name: z.string().min(1),
});

export default function AccountPage() {
	const { user } = useUser();

	const {
		setActive,
		userMemberships,
		isLoaded: isLoadedUserMemberships,
	} = useOrganizationList({
		userMemberships: { pageSize: 100 },
	});

	const form = useForm({
		schema: accountSchema,
		defaultValues: {
			name: "",
		},
	});

	useEffect(() => {
		form.reset({
			name: user?.fullName ?? "",
		});
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [user]);

	const [isLoading, setIsLoading] = useState(false);
	const [isUploadingImage, setIsUploadingImage] = useState(false);

	async function handleUpdateName(data: z.infer<typeof accountSchema>) {
		if (!user) return;

		try {
			setIsLoading(true);
			await user.update({
				firstName: data.name.split(" ")[0],
				lastName: data.name.split(" ").slice(1).join(" "),
			});

			toast.success("Name updated successfully!");
		} catch (_error) {
			toast.error("Failed to update name. Please try again.");
		} finally {
			setIsLoading(false);
		}
	}

	async function handleImageUpload(event: React.ChangeEvent<HTMLInputElement>) {
		const file = event.target.files?.[0];
		if (!file || !user) return;

		try {
			setIsUploadingImage(true);
			await user.setProfileImage({ file });
			toast.success("Profile picture updated!");
		} catch (_error) {
			toast.error("Failed to update profile picture. Please try again.");
		} finally {
			setIsUploadingImage(false);
		}
	}

	return (
		<div>
			<SettingsSection
				title="Account"
				description="Manage your account settings and preferences.">
				<div className="flex flex-col gap-6 pt-6">
					{/* Profile Picture Section */}
					<div className="flex justify-between items-center border-b border-sidebar-border px-6 pb-6">
						<div className="flex flex-col gap-1">
							<h2 className="font-medium">Profile Picture</h2>
							<p className="text-muted-foreground text-sm">
								How you&apos;re shown around the app.
							</p>
						</div>

						<div className="relative">
							<input
								type="file"
								accept="image/*"
								className="hidden"
								onChange={handleImageUpload}
								disabled={isUploadingImage}
								id="profile-upload"
							/>
							<button
								onClick={() =>
									document.getElementById("profile-upload")?.click()
								}
								className="cursor-pointer relative group hover:ring-2 hover:ring-blue-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-300 active:ring-blue-200 rounded-3xl transition-colors disabled:cursor-not-allowed disabled:opacity-50"
								disabled={isUploadingImage}
								aria-label="Update profile picture"
								type="button">
								<div className="absolute inset-0 bg-black/0 group-hover:bg-black/50 group-focus:bg-black/50 transition-colors rounded-3xl flex items-center justify-center">
									{isUploadingImage ? (
										<Spinner className="text-white" />
									) : (
										<UploadIcon className="h-5 w-5 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity" />
									)}
								</div>
								<UserAvatar user={user} />
							</button>
						</div>
					</div>

					{/* Name Section */}
					<div className="flex justify-between items-center border-b border-sidebar-border px-6 pb-6">
						<div className="flex flex-col gap-1">
							<h2 className="font-medium">Name</h2>
							<p className="text-muted-foreground text-sm">
								This is your display name
							</p>
						</div>

						<Form form={form} onSubmit={handleUpdateName}>
							<div className="flex items-center gap-2">
								<Input
									{...form.register("name")}
									placeholder="Your full name"
									disabled={isLoading || !form.formState.isValid}
									className="max-w-60"
								/>
								<Button
									type="submit"
									disabled={isLoading || !form.formState.isDirty}>
									{isLoading ? <Spinner /> : "Save"}
								</Button>
							</div>
						</Form>
					</div>

					{/* Organization Section */}
					<div className="flex justify-between items-center px-6 pb-6">
						<div className="flex flex-col gap-1">
							<h2 className="font-medium">Organization</h2>
							<div className="text-muted-foreground text-sm flex gap-1">
								<p>Switch to an existing organization or</p>
								<CreateOrganization>create a new one</CreateOrganization>
							</div>
						</div>

						<div className="flex items-center gap-2">
							<OrganizationSelect
								isLoadedUserMemberships={isLoadedUserMemberships}
								userMemberships={
									userMemberships as { data: OrganizationMembershipResource[] }
								}
								setActive={setActive}
							/>
						</div>
					</div>
				</div>
			</SettingsSection>
		</div>
	);
}

Version and model info

Aider v0.75.2.dev
Model: sonnet

Tested using:

export AIDER_SHOW_REPO_MAP=true
aider page.tsx

The app then consumes 100% CPU and hangs, never showing the chat dialog