CustomAvatar not recognized
i get the following error in the customavatar file inside components folder: Cannot redeclare block-scoped variable 'CustomAvatar'.ts(2451)
const CustomAvatar: ({ name, style, ...rest }: Props) => JSX.Element. this is my code: import {CustomAvatar} from "@/components/custom-avatar";
import { Text } from "@/components/text"
import { AccountSettings } from "@/components/layout/account-settings";
export const CurrentUser = () => {
const [opened, setOpened] = React.useState(false);
const { data: user } = useGetIdentity<User>();
const content = (
<div
style={{
display: "flex",
flexDirection: "column",
}}
>
<Text
strong
style={{
padding: "12px 20px",
}}
>
{user?.name}
</Text>
<div
style={{
borderTop: "1px solid #d9d9d9",
padding: "4px",
display: "flex",
flexDirection: "column",
gap: "4px",
}}
>
<Button
style={{ textAlign: "left" }}
icon={<SettingOutlined />}
type="text"
block
onClick={() => setOpened(true)}
>
Account settings
</Button>
</div>
</div>
);
return (
<>
<Popover
placement="bottomRight"
content={content}
trigger="click"
overlayInnerStyle={{ padding: 0 }}
overlayStyle={{ zIndex: 999 }}
>
<CustomAvatar
name={user?.name}
src={user?.avatarUrl}
size="default"
style={{ cursor: "pointer" }}
/>
</Popover>
{user && (
<AccountSettings
opened={opened}
setOpened={setOpened}
userId={user.id}
/>
)}
</>
);
};
2 Replies
Hi @Crazed. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the knowledge sources, I don't have enough specific details to directly address the "Cannot redeclare block-scoped variable 'CustomAvatar'" error you're encountering. However, I can provide some general guidance based on the available information about refine and React components.
The error you're seeing suggests that there might be a naming conflict or a duplicate declaration of the
CustomAvatar component. Here are a few things you can try:
1. Make sure you're exporting CustomAvatar correctly from its source file. It should be exported as a named export, like this:
2. In your importing file, ensure you're importing it correctly:
3. Check if you have multiple declarations of CustomAvatar in your project. This error often occurs when you accidentally declare the same variable or component more than once in the same scope.
4. If you're using TypeScript, make sure your tsconfig.json is set up correctly and that you're not accidentally including the same file twice in your compilation.
5. Try renaming the component to something unique (e.g., MyCustomAvatar) to see if it resolves the conflict.
As for the usage of CustomAvatar in your CurrentUser component, the implementation looks correct based on the typical usage of components in React and refine.
If you continue to face issues, you might want to check the refine documentation for any specific guidelines on custom components or consult the refine GitHub issues for similar problems and their solutions.
Remember, without seeing the full implementation of your CustomAvatar component and the structure of your project, it's difficult to pinpoint the exact cause of the error. If the problem persists, you may want to create a minimal reproducible example and seek help on the refine community channels or GitHub issues.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@217965123216736266> Kapa.ai is still learning and improving, please let me know how I did by reacting below.