Vite error when defining a component in an object: Cannot read properties of undefined

Question

I have a list of options in a React component which I am mapping through to make some UI. The component is being used in QwikJS, which supports React components and uses Vite. However, when I add an icon value in my list of options Vite breaks during the build.

import { IconHome, IconMail, IconPencilPlus } from '@tabler/icons'

interface OptionProps {
    id: number
    text: string
    icon: React.ReactElement
    url?: string
    action?: () => void
}

export const Command = qwikify$(() => {
    ...
    const options: OptionProps[] = [
        {
            id: 1,
            text: 'Home',
            icon: <IconHome className='h-5 w-5' stroke={1} />,
            url: '/',
            action: undefined,
        },
        {
            id: 2,
            text: 'Join the waitlist',
            icon: <IconPencilPlus className='h-5 w-5' stroke={1} />,
            url: undefined,
            action: () => {
                setShowWaitlist(true)
            },
        },
     ]
     ...
}

I can't work out how to define the icon. Vite keeps giving me the error:

[vite] Internal server error: Cannot read properties of undefined (reading 'IconHome')

I've used the same code in Next (this is Qwik). Can anyone see what I'm doing wrong? - would like to render the icon when I map through the options, ie:

{options.map((option, i) => (
    <div>
        <div>{option.icon}</div>
        <div>{option.text}</div>
    <div>
))}

Answer 1

import { IconHome, IconMail, IconPencilPlus } from '@tabler/icons'

interface OptionProps {
    id: number
    text: string
    icon: () => React.ReactElement
    url?: string
    action?: () => void
}

export const Command = qwikify$(() => {
    ...
    const options: OptionProps[] = [
        {
            id: 1,
            text: 'Home',
            icon: () => <IconHome className='h-5 w-5' stroke={1} />,
            url: '/',
            action: undefined,
        },
        {
            id: 2,
            text: 'Join the waitlist',
            icon: () => <IconPencilPlus className='h-5 w-5' stroke={1} />,
            url: undefined,
            action: () => {
                setShowWaitlist(true)
            },
        },
     ]
     ...
}

{options.map((option, i) => (
    <div>
        <div>{option.icon()}</div>
        <div>{option.text}</div>
    <div>
))}