Skip to content

useModal with custom component: Component was made a reactive object #2848

@hackel

Description

@hackel

Describe the bug

I'm migrating my code to to use the new useModal composable, and for my custom modals, I'm getting this warning on the console whenever I create one.

const { create } = useModal();
create({ component: FeedbackModal }).show();
Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. 
Component that was made reactive:  
Object { __name: "FeedbackModal", ...

I've tried using markRaw on the imported component , but it made no difference. I see in the source that it should already be applying markRaw to the component instance, so I'm not sure why this is happening.

Reproduction

https://stackblitz.com/edit/github-kpbciadc?file=src%2Fcomponents%2FComp.vue

Used Package Manager

npm

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions