Vue received a Component which was made a reactive object.

[MrThanlon]

[Vue warn]: Vue received a Component which 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: {name: "MessageItem", props: {…}, __file: "src/components/MessageItem.vue", __hmrId: "681364ba", render: ƒ} at <VirtualListItem index=0 tag="div" event="itemResize" ... > at <VirtualList style= {overflow-y: "scroll"} data-sources= [{…}] data-key="id" ... > at <Message class="h-50" onSend=fn onDataFunction=fn ... > at <App>

[chiangming]

[Vue warn]: Vue received a Component which 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: {name: "MessageItem", props: {…}, __file: "src/components/MessageItem.vue", __hmrId: "681364ba", render: ƒ} at <VirtualListItem index=0 tag="div" event="itemResize" ... > at <VirtualList style= {overflow-y: "scroll"} data-sources= [{…}] data-key="id" ... > at <Message class="h-50" onSend=fn onDataFunction=fn ... > at

try this solution: https://jskoa.com/?p=8666 use the Item component in setup() instead of in data(). It works for me. Be Like this:

`import { Search } from '@element-plus/icons'

data(){ return{ Search } },`

=>

` import { Search } from '@element-plus/icons'

setup(props, context){

return { Search //这return同样在模板中能显示 }

}, `

[mahomk2]

Hello my friends !!

I will show you how to do with Options API 👍

-You have to import Search icon from '@element-plus/icons-vue' -You have to import shallowRef from 'vue' -You have to add your icon name Search in the components -You have to add your icon name Search in the Data as you see and the error massage will not show again 👍

If this helped you please give me 👍 for everyone see the solution. Byee !