After update microVM official template Vue + Vite stop working

[wkra]

🐛 bug report

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project
  adheres to.
• I have searched the issue tracker for an issue that matches the one I want
  to file, without success.

Description of the problem

After update microVM official template Vue + Vite stop working

How has this issue affected you? What are you trying to accomplish?

There is no more possibility to use devbox environment after microVM update

To Reproduce

• create Devbox with official Vue Vite template
• click button "Update to latest microVM"
• error [plugin:vite:vue] @vnode-* hooks in templates are no longer supported. Use the vue: prefix instead. For example, @vnode-mounted should be changed to @vue:mounted. @vnode-* hooks support has been removed in 3.4. appears

Link to sandbox: link (optional)

Your Environment

Software	Name/Version
Сodesandbox
Browser
Operating System

[CompuIves]

Hello! Could you share the original template you forked from? I tried just with the "Vue (Vite)" template but I couldn't repro the issue. It's an interesting issue, from what I can gather the code for the example is outdated in comparison to the dependencies.

[wkra]

Hi :)
I have selected a template from the screen:

Then I clicked the "Update to latest microVM button" in the top left corner.

And without any changes to the code, errors appear:

I tried to solve this somehow, but unfortunately without success. Link to the devbox from sceens: https://codesandbox.io/p/devbox/young-sky-76d998

[bogdan0083]

I have the same problem after updating microVM. Restarting the task and refreshing browser doesn't help:

Before updating, template was working just fine.

Update: Just tried to update all the dev dependencies to the latest version. Now the error is gone. Works fine.

[JamesACS]

Thank you for confirming @bogdan0083 - The template isn't throwing these errors for us now even on load!

[CompuIves]

Is this still an issue? We now have health checks on all our templates to ensure that nothing breaks again.

[bogdan0083]

Is this still an issue? We now have health checks on all our templates to ensure that nothing breaks again.

Yep. The error is still present:

[plugin:vite:vue] @vnode-* hooks in templates are no longer supported. Use the vue: prefix instead. For example, @vnode-mounted should be changed to @vue:mounted. @vnode-* hooks support has been removed in 3.4.

Here's a newly created reproduction link: https://codesandbox.io/p/devbox/awesome-nash-k7rtks?file=%2Fpackage.json%3A12%2C20

If the error is not showing try to terminate vite server and run npm run dev.

[JamesACS]

Hello @bogdan0083

I've just tried to replicate this and restarting the environment seems to resolve the issue.

Please could you confirm this?

[bogdan0083]

Hello @bogdan0083

I've just tried to replicate this and restarting the environment seems to resolve the issue.

Please could you confirm this?

Hmm, you're right. Clicking "Restart Devbox" actually resolves the issue. Thanks!

[dgonzalezr]

Hi there 👋🏼

I'm still getting this problem, and I can confirm it only happens on Codesandbox (devbox) because I was able to download the Devbox and run it without issues locally. Restarting the environment did not solve anything for me.

Here's the reproduction link: https://codesandbox.io/p/devbox/beeq-vuejs3-2d8p9t

[filipelima18]

Hi @dgonzalezr! I forked your Devbox just now and then manually restarted the Devbox, and the preview works as expected. You can check my forked Devbox here.

Here's the option I used to restart the Devbox:

Can you try again and confirm if it's working?

[mho22]

I also get this issue here. Creating a public devbox returns the error with Vue + Vite

The idea is to display some code and views to people who don't have an account on codesandbox. [ In my case : People going on my website are being redirected on Codesandbox. ] If they want to play with code they have to create an account. But with this displayed error, nobody will be tempted to create an account.

The restart devbox option isn't available for guests. There's no tool to restart the devbox here.

[filipelima18]

Hi @mho22. Are you embedding a public Devbox you created? If so, you should be able to restart the Devbox yourself so that it solves the error for guests.

[mho22]

@filipelima18 Hi @filipelima18, I am using the githubbox url method to share my github project on codesandbox. Should I create a public Devbox from my own repo instead ?

[dgonzalezr]

Hi there @filipelima18

The issue is happening again: https://codesandbox.io/p/devbox/beeq-with-vuejs-forked-4l26fc?file=%2Fsrc%2Fviews%2FAbout.vue

Forking and restarting manually the DevBox makes no difference, the error is still there! 😕

Late Edit: I've managed to make it work again, but still quite annoying that this issue could appear any time.