Cannot add button to dialog slot

[wnvko]

Description

Not able to add button to any of dialog's component slots.

Steps to reproduce

I have this dialog:

<IgrDialog closeOnOutsideClick="true" ref={dialog}>
  <h5 slot="title">
    <span>Confirmation</span>
  </h5>
  <p>Are you sure you want to do this?</p>
  <div slot="footer">
    <IgrButton variant="flat" size="large">OK</IgrButton>
  </div>
</IgrDialog>

Result

When I run the application an error is thrown Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Expected result

Dialog should allow addition of button to any of its slots.

Attachments

Here is full error log:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at createFiberFromTypeAndProps (http://localhost:3003/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=984e576c:20439:25)
    at createFiberFromElement (http://localhost:3003/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=984e576c:20460:23)
    at createChild (http://localhost:3003/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=984e576c:11377:34)
    at reconcileChildrenArray (http://localhost:3003/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=984e576c:11570:33)
    at reconcileChildFibers2 (http://localhost:3003/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=984e576c:11847:24)
    at reconcileChildren (http://localhost:3003/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=984e576c:14292:37)
    at updateHostComponent (http://localhost:3003/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=984e576c:14802:11)
    at beginWork (http://localhost:3003/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=984e576c:15923:22)
    at beginWork$1 (http://localhost:3003/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=984e576c:19749:22)
    at performUnitOfWork (http://localhost:3003/node_modules/.vite/deps/chunk-GSZ7ISAW.js?v=984e576c:19194:20)

[MayaKirova]

@wnvko Do you have a sample you can share? The error sounds like maybe some module, maybe for the igrButton, was not registered. There are similar samples here: https://www.infragistics.com/products/ignite-ui-react/react/components/notifications/dialog#ignite-ui-for-react-dialog-example In which the button is added as expected.

[wnvko]

@MayaKirova yes sure, here is a sample showing this issue. DialogIssue.zip

[MayaKirova]

@wnvko Thanks for the sample. The issue seems to be with the button's content similar to the one I mentioned here: https://github.com/IgniteUI/igniteui-react/issues/60#issuecomment-2036511594

The react wrappers don't allow setting text content directly, so you'll need to wrap it and set a key. For example:

<IgrButton variant="flat" size="large" clicked={() => dialog?.current.toggle()} key={uuid()}><span key="Cancel">Cancel</span></IgrButton>
<IgrButton variant="flat" size="large" clicked={() => dialog?.current.toggle()} key={uuid()}><span key="OK">OK</span></IgrButton>