Typescript Error for field type ReactNode:
Unanswered
Green Kingfisher posted this in #help-forum
Green KingfisherOP
Error:
ui.type.ts:
floating-dock-items.data.ts:
'Home' refers to a value, but is being used as a type here. Did you mean 'typeof Home'?ui.type.ts:
import { ReactNode } from 'react';
export type TFloatingDockItem = {
title: string;
icon: ReactNode;
href: string;
};floating-dock-items.data.ts:
import { TFloatingDockItem } from '@/types/ui.type';
import { Home } from 'lucide-react';
export const FLOATING_DOCK_DATA: TFloatingDockItem[] = [
{
title: 'Home',
href: '/',
icon: <Home />,
},
];2 Replies
Spectacled bear
Try passing
icon: Home without </>@Green Kingfisher Error:
'Home' refers to a value, but is being used as a type here. Did you mean 'typeof Home'?
ui.type.ts:
import { ReactNode } from 'react';
export type TFloatingDockItem = {
title: string;
icon: ReactNode;
href: string;
};
floating-dock-items.data.ts:
import { TFloatingDockItem } from '@/types/ui.type';
import { Home } from 'lucide-react';
export const FLOATING_DOCK_DATA: TFloatingDockItem[] = [
{
title: 'Home',
href: '/',
icon: <Home />,
},
];
.tsx instead of .ts
jsx syntax such as <Home /> is forbidden in .ts file, you need to explicitly use the .tsx extension
jsx syntax such as <Home /> is forbidden in .ts file, you need to explicitly use the .tsx extension