Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"[Vue warn]: Vue received a Component that was made a reactive object." when using <component :is="ComponentVar" #11921

Closed
LeftGamer1 opened this issue Sep 13, 2024 · 10 comments

Comments

@LeftGamer1
Copy link

LeftGamer1 commented Sep 13, 2024

Vue version

>=3.4

Link to minimal reproduction

https://codesandbox.io/p/sandbox/vue-3-5-test-m3my3n?workspaceId=4d0dccc1-4022-45d1-b1ff-925518ace372

Steps to reproduce

  1. Open console and see warns there
  2. Switch Vue version to <3.4 (exact same sandbox but with 3.3.0)
  3. Check console, its clear

What is expected?

Clear console without warns

What is actually happening?

Console spamming with warns

System Info

No response

Any additional comments?

Doesn't checked this on composition API.
Not sure if this a bug or something changed starting from 3.4...
Will be good if someone explain this to me o:

P.S.
Couldnt reproduce 3.3 in SFCPlayground, so.. codesandbox again, sorry for that :(

@yyx990803
Copy link
Member

Sandbox is not accessible.

@LeftGamer1
Copy link
Author

@yyx990803 whoops, my bad. Open public.

@LinusBorg
Copy link
Member

import { markRaw } from 'vue'

export default defineComponent({
  components: {Comp},
  data() {
    return {
      compVar: markRaw(Comp),
    };
  },
});

@LeftGamer1
Copy link
Author

LeftGamer1 commented Sep 13, 2024

@LinusBorg IKR that this can be fixed with markRaw, but isn't this a bug? I mean, from Vue2 and before 3.4 everything was working without warnings and now everyone will need to manually search for places where occurrences like this happen. 
If that's OK, then I think it should be mentioned in the migration guide or somewhere in the docs, what do you think? 🤔

@LeftGamer1
Copy link
Author

LeftGamer1 commented Sep 13, 2024

UPD: no way that, in that case, it is necessary to use markRaw, because it affects the performance.
For example, we have a plugin for modals, where one of the options is component, which is usually provided with a string ('v-modal-confirm'), but there are still some edge cases with variables (import VModalConfirm).
When using var+markRaw, the content of the modal lags a lot. For example what is lagging: the animations look slower and are like 10 FPS with freezes, as well as the scroll of the QSelect options menu.

I think it should be fixed, at least as in my previous report on TransitionGroup, if it is not a more complicated bug.

@LeftGamer1
Copy link
Author

I am asking for issue reopen, and more complex test 🙏

@LinusBorg
Copy link
Member

LinusBorg commented Sep 13, 2024

  1. This warning has been in the source code forever (Since 3.0.0 alpha)
  2. This warning is pretty explicit in explaining why it should not be made reactive, and tells you to use markRaw
  3. Your 3.3 codesandbox doesn't open.
  4. When I run your example in the playground with Vue 3.3, it still shows this error (see here, importMap is set to 3.3)
  5. I don't see any reason to suspect that markRaw could have any effect on performance, it's only adding a non-enumerable key

So, if you can come up with a demo that shows how markRaw has a perf impact, you can open a new issue. But the original problem you reported here isn't one as far as I can see.

@edison1105
Copy link
Member

edison1105 commented Sep 13, 2024

This warning has been around for four years, It's not a recent addition.

`marking the component with \`markRaw\` or using \`shallowRef\` ` +

see playground

@LeftGamer1
Copy link
Author

LeftGamer1 commented Sep 13, 2024

Your 3.3 codesandbox doesn't open.

Whoops, privated sandbox again, my bad. Can open now.

When I run your example in the playground with Vue 3.3, it still shows this error (see here, importMap is set to 3.3)

Yep, as i said before - i couldnt reproduce this on the Playground. Maybe the reason is cdn, idk.

I can see that the warning is very old, but it still seems strange to me that in older versions I didn't have this warning on the same code.
I guess that maybe in the sandbox i havent this warning because of some other flags\compile\bundler warnings and sandbox tools errors when installing 3.3.0.

UPD: after like hour of checking, before sending the message
I will try to reproduce the markRaw perf impact on monday, because its still a strange thing for me. This happens from time to time on our corporate repo.
For now: i have created another version of the 3.3(.2) repo - now with Vite. After checking all the 3.3.x versions - i can now declare that there are no warns before 3.3.3.

@LeftGamer1
Copy link
Author

Update..
After hours of testing, i agree that the markRaw has no performance impact. I think there was an issue with my compiler which worked for 5 days straight and had a big perf impact on my pc overall 💀 Sorry for disinformation.
Anyway, what has changed in the 3.3.0 - 3.3.2 versions? Why are there no warnings?

@github-actions github-actions bot locked and limited conversation to collaborators Oct 3, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants