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

Compiled Vue 2.7 Script Setup Components crash when mounted in Vue 3 Compat #11164

Open
jssullivan opened this issue Jun 17, 2024 · 2 comments
Open

Comments

@jssullivan
Copy link

jssullivan commented Jun 17, 2024

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 to this. However _vm._self._setupProxy is undefined (which also happens for a non script setup component in that example).

Screenshot 2024-06-17 at 5 00 11 PM

This only caused a warning for the defineComponent compiled component, as the template as its reading directly from _vm

Screenshot 2024-06-17 at 5 00 30 PM

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!

@jssullivan 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
@jssullivan
Copy link
Author

If others hit this, you can apply this pnpm patch to compatRender in @vue/compat to address this crash.
jssullivan/vue-3-not-running-compiled-script-setup@7dcda5b

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.

@yyx990803
Copy link
Member

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.

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

2 participants