Error when submitting form via Ant Design's useModalForm.

I get the following error:

Converting circular structure to JSON --> starting at object with constructor 'HTMLSpanElement' | property '__reactFiber$xj14eaifikr' -> object with constructor 'FiberNode' --- property 'stateNode' closes the circle

Converting circular structure to JSON --> starting at object with constructor 'HTMLSpanElement' | property '__reactFiber$xj14eaifikr' -> object with constructor 'FiberNode' --- property 'stateNode' closes the circle

Can you help determine what the issue might be? Here's my code:

// ... Imports 

export default function CreateNoteModal() {
const {
modalProps: createModalProps,
formProps: createFormProps,
show,
close,
submit,
} = useModalForm<INote>({
resource: 'notes',
action: 'create',
});

const { selectProps: userSelectProps } = useSelect({
resource: 'users',
optionLabel: 'full_name',
optionValue: 'id',
});
const { selectProps: firmSelectProps } = useSelect({
resource: 'firms',
});
const { selectProps: categorySelectProps } = useSelect<ICategory>({
resource: 'note_categories',
});

return (
<>
<Button onClick={() => show()} type='primary'>
<Space align='center'>
<PlusCircle className='relative w-4 h-4 top-1' /> Create note
</Space>
</Button>
<Modal
{...createModalProps}
centered
width={1400}
footer={[
<Button key='add_new' type='primary' onClick={submit}>
Add new note
</Button>,
,
]}
>
<Form {...createFormProps} layout='vertical'>
<Title level={4}>Tie note to user or firm</Title>
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
<Col span={12}>
<Form.Item label='User' name='user_id'>
<Select {...userSelectProps} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label='Firm' name='firm_id'>
<Select {...firmSelectProps} />
</Form.Item>
</Col>
</Row>
<Divider />
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
<Col span={12}>
<Form.Item
label='Title'
name='title'
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label='Category' name='category'>
<Select {...categorySelectProps} />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label='Content'
name='content'
rules={[
{
required: true,
},
]}
>
<TextArea rows={4} />
</Form.Item>
</Col>
</Row>
</Form>
</Modal>
</>
);
}

// ... Imports 

export default function CreateNoteModal() {
const {
modalProps: createModalProps,
formProps: createFormProps,
show,
close,
submit,
} = useModalForm<INote>({
resource: 'notes',
action: 'create',
});

const { selectProps: userSelectProps } = useSelect({
resource: 'users',
optionLabel: 'full_name',
optionValue: 'id',
});
const { selectProps: firmSelectProps } = useSelect({
resource: 'firms',
});
const { selectProps: categorySelectProps } = useSelect<ICategory>({
resource: 'note_categories',
});

return (
<>
<Button onClick={() => show()} type='primary'>
<Space align='center'>
<PlusCircle className='relative w-4 h-4 top-1' /> Create note
</Space>
</Button>
<Modal
{...createModalProps}
centered
width={1400}
footer={[
<Button key='add_new' type='primary' onClick={submit}>
Add new note
</Button>,
,
]}
>
<Form {...createFormProps} layout='vertical'>
<Title level={4}>Tie note to user or firm</Title>
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
<Col span={12}>
<Form.Item label='User' name='user_id'>
<Select {...userSelectProps} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label='Firm' name='firm_id'>
<Select {...firmSelectProps} />
</Form.Item>
</Col>
</Row>
<Divider />
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
<Col span={12}>
<Form.Item
label='Title'
name='title'
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label='Category' name='category'>
<Select {...categorySelectProps} />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label='Content'
name='content'
rules={[
{
required: true,
},
]}
>
<TextArea rows={4} />
</Form.Item>
</Col>
</Row>
</Form>
</Modal>
</>
);
}

2 Replies

kapa.ai•5mo ago

Hi @James. 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 provided code and error message, it seems like the issue might be related to a circular reference in your JavaScript objects. This is a common issue when trying to stringify an object that has a property that references itself. However, from the provided code and the knowledge sources, it's not immediately clear where this circular reference might be occurring. The code seems to be using the useModalForm, useSelect, and Ant Design components correctly based on the examples provided in the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form#usage) and blog posts (https://refine.dev/blog/refine-react-invoice-generator-3#create-action-for-contacts). One thing you could try is to ensure that the objects you're passing to the useModalForm and useSelect hooks don't contain any circular references. For example, make sure that the INote, ICategory, and any other objects you're using don't reference themselves or each other in a way that could cause a circular structure. If the issue persists, you might want to consider seeking help from the Refine community or the maintainers of the library. They might be able to provide more specific guidance based on their knowledge of the library's internals. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@204362818592440323> kapa.ai is still learning and improving, please let us know how it did by reacting below