Skip to content

While putting destructured props into toRefs the warning appears [Vue warn] toRefs() expects a reactive object but received a plain one. #13171

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

Open
avinean opened this issue Apr 8, 2025 · 5 comments

Comments

@avinean
Copy link

avinean commented Apr 8, 2025

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNqFkj1PwzAQhv+K5SWtFDlChaUKSIA6wABVYbSEquRSXBLbsp1Qqep/585JSocWtvt4znrvPe/5vbWia4HPee4Lp2xgHkJr76RWjTUusEfTWFY507BEZJQQnkidZz2PJCYBGluvA2DGWF6qLgYYxvGsL2d9Pc9OaJ7y4AujK7URW280CtkTLHmBk6oG92qDMtpLPmexQ711XZvv51gLroV0rBefUHydqW/9jmqSLx14cB1IfuyFtdtA6NuLtxfYYXxsNqZsa6T/aK7Am7oljT320OoSZZ9wUe1TtFPpzbtf7AJoPy5FQok8RF5ytJdMu7T6r9yZuI5zUh/QxfE0ly+5Z8GsoPIps850qgScHS7bn1RqPIQnUAiBjPUI3LISKqVhSflkStQwPkkQD2hJkg4vT+LQFKH/fseZv4A7fHTgyBfcYSZuxNWMH34AEnfgZw==

Steps to reproduce

  1. Create a component
  2. Call defineProps like this
    const { ...props } = defineProps()
  3. Put props into toRefs
    toRefs(props))

Note
this works fine
const props = defineProps() toRefs(props))

What is expected?

No warning

What is actually happening?

A warning appears [Vue warn] toRefs() expects a reactive object but received a plain one.

System Info

Any additional comments?

No response

@avinean avinean changed the title [Vue warn] toRefs() expects a reactive object but received a plain one. While putting destructured props into toRefs the warning appears [Vue warn] toRefs() expects a reactive object but received a plain one. Apr 8, 2025
@edison1105
Copy link
Member

const {...props} = defineProps() // compiled to const props = _createPropsRestProxy(__props, [])
console.log(props) // props is a plain object


const props = defineProps() 
console.log(props) // props is a Proxy

They are different, see https://vuejs.org/api/sfc-script-setup.html#reactive-props-destructure

@avinean
Copy link
Author

avinean commented Apr 8, 2025

@edison1105 Thanks for the response. But it doesn't solve the problem.
I've updated the reproduction a bit so maybe it is more clear now

This works fine (no toRefs is needed obviously)

const props = defineProps<{ myProp: string }>()
provide('context', props)

But this emits a warning

const { someProp1, someProp2, ...props } = defineProps<{ myProp: string }>()
provide('context', {
  extraValue1: 1,
  extraValue2: 2,
  // ...props this won't work so I need toRefs
  ...toRefs(props) // this works fine, but warning appears
})

@avinean
Copy link
Author

avinean commented Apr 8, 2025

@edison1105 don't you think const {...props} = defineProps() shold also result into proxy?

@AndrewBogdanovTSS
Copy link

@edison1105 can this issue be reopened?

@edison1105
Copy link
Member

There is a fix ac43b11 in vapor branch, so it will be fixed when v3.6 is released.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants