Vue purported vnode error in CodeSandbox

[Divensky]

🐛 bug report

Preflight Checklist

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

Description of the problem

I had my Vue 3 app working fine. I did not make any changes and opened the Codesandbox to copy a link to the working app. All of sudden I saw the below error.

My app does not have any vnode elements (verified through a search). It couldn't have had any vnode elements since this is a brand-new app created with latest copy of Vue and Vite two days ago. Below is an excerpt from the error message:

/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:3407:15)
      at traverseChildren (/workspaces/commandbar-example/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:3359:5)
...
2:08:07 AM [vite] Internal server error: @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.

I pulled the branch from Codesanbox through GitHub into an offline VS Code instance. From there, I was able to run it without issues. When I duplicated the branch and pulled it into Codesanbox, it had the same error.

After a lot of trial and error, what solved it was deleting the node_modules folder and package-lock file and then running npm install again.

I am reporting it because the above behavior seems like a bug peculiar to Codesandbox, since it wasn't present offline.

Also, I saw the same error message two days ago when I tried to start a new Vue project in Codesandbox. At that time I went around it by initializing the project offline and pulling it in though GitHub.

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

I had to send a link to a working app for review and I couldn't send it on time :(

To Reproduce

Open: https://codesandbox.io/p/github/divensky/commandbar-example/test-env-2

(this is a brunch where I haven't done the above fix with reinstalling node_modules; it still shows the error).

Link to sandbox: link (optional)

Here are two screenshots of the error message:

Your Environment

Software	Name/Version
Сodesandbox	0.0.315
Browser	Chrome
Operating System	Windows

[CompuIves]

This is such a weird bug, I've seen it pop up before. Deleting node_modules and reinstalling fixes it, but that's of course not desired. I'm going to see why Vue gets a wrong version the second time the VM starts 🤔

[dgonzalezr]

It's the same issue discussed on #8298. It's quite annoying because it can reappear at any time, for example, I just updated the dependencies of our sandbox (which was working fine), and boom, there it was 😞

[basiteaal]

Experiencing the same issue here. Any idea on when this will be picked up on or heads up?

[CompuIves]

We finally found the core issue of this, some internal library was updating some Vue code which caused this issue ultimately. We've created a fix and I'll let you know when it's deployed!

[CompuIves]

This should finally be fixed! Apologies for the inconvenience!

[basiteaal]

Thanks!

On Fri, Jul 26, 2024 at 12:05 PM Ives van Hoorne @.***> wrote:

This should finally be fixed! Apologies for the inconvenience!

— Reply to this email directly, view it on GitHub https://github.com/codesandbox/codesandbox-client/issues/8451#issuecomment-2252420481, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFSAUNKIZCR6EAW5AFNB6VDZOINOLAVCNFSM6AAAAABH2RNP4OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENJSGQZDANBYGE . You are receiving this because you commented.Message ID: @.***>

--

Met vriendelijke groet,

Bas Hagendijk-Heijns ITeaal – Idéaal in Maatwerk Software

www.ITeaal.nl @.*** 071 – 569 0220

--

This e-mail is intended only for the addressee(s) and may contain privileged information. If you have received this e-mail in error, please immediately notify the sender, delete the e-mail from your computer and destroy all copies or print outs (if any). This e-mail is not intended to be relied upon by any person or entity without subsequent confirmation of its contents in the form of a (fax) letter. ITeaal Beheer B.V. accepts no liability for the use of the information contained in this e-mail. ITeaal Beheer B.V. is established at Zoeterwoude, the Netherlands, and is registered with the Commercial Register under no. 66949769. The general terms and conditions of ITeaal Beheer B.V. apply to all our services. The general terms and conditions can be found on our website iteaal.nl http://iteaal.nl and will be sent to you free of charge upon request.