You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
1.Pull down the linked repository
2.Run pnpm i && pnpm dev
3. Open the app, Click the first button of a Compiled Vue 3 component working correctly
4. Click the second button, this is a Compiled Vue 2 component that uses the Composition Api with defineComponent
5. Click the last button, this is a Compiled Vue 2 component that uses script setup, see this crashes when trying to read the ref hello_vue_team
What is expected?
All three components render correctly
What is actually happening?
It crashes when reading the variable hello_vue_team defined in the script setup of the compiled Vue 2.7 component.
System Info
No response
Any additional comments?
Looking from a debugger it appears that the variable hello_vue_team is being correctly evaluated and attached to this. However _vm._self._setupProxy is undefined (which also happens for a non script setup component in that example).
This only caused a warning for the defineComponent compiled component, as the template as its reading directly from _vm
Naively in this minimum viable repro, it seems like thisProxy._self._setupProxy needs to be set to thisProxy inside renderComponentRoot. I can submit a PR with that change, but don't know if there are other impacts. I can alternatively add this to compatRender in @vue/compat.
Appreciate the assistance!
The text was updated successfully, but these errors were encountered:
jssullivan
changed the title
Compiled Vue 2.7 Script Setup Components crash when mounted in Vue 3
Compiled Vue 2.7 Script Setup Components crash when mounted in Vue 3 Compat
Jun 17, 2024
I can create an MR to add this, or create a new @vue/compat flag to add this. Looking at the Vue 2 code _setupProxy only contains values returned from the setup function vs the whole component instance. But this should handle most cases, and atleast create warnings instead of a crash.
Technically pre-compiled components have no compatibility guarantees as it relies on Vue 2 internals and we strongly recommend you to use the source SFC instead of Vue 2 compiled code.
That said if you can submit a PR to get these components working I'd be happy to merge it.
Vue version
3.4.27 (happens in 3.3 as well) with both Vue Compat and Vue
Link to minimal reproduction
https://github.com/jssullivan/vue-3-not-running-compiled-script-setup
Steps to reproduce
1.Pull down the linked repository
2.Run pnpm i && pnpm dev
3. Open the app, Click the first button of a Compiled Vue 3 component working correctly
4. Click the second button, this is a Compiled Vue 2 component that uses the Composition Api with defineComponent
5. Click the last button, this is a Compiled Vue 2 component that uses script setup, see this crashes when trying to read the ref
hello_vue_team
What is expected?
All three components render correctly
What is actually happening?
It crashes when reading the variable
hello_vue_team
defined in the script setup of the compiled Vue 2.7 component.System Info
No response
Any additional comments?
Looking from a debugger it appears that the variable
hello_vue_team
is being correctly evaluated and attached tothis
. However_vm._self._setupProxy
is undefined (which also happens for a non script setup component in that example).This only caused a warning for the defineComponent compiled component, as the template as its reading directly from
_vm
Naively in this minimum viable repro, it seems like
thisProxy._self._setupProxy
needs to be set tothisProxy
inside renderComponentRoot. I can submit a PR with that change, but don't know if there are other impacts. I can alternatively add this tocompatRender
in @vue/compat.Appreciate the assistance!
The text was updated successfully, but these errors were encountered: