codesandbox-client icon indicating copy to clipboard operation
codesandbox-client copied to clipboard

Vue purported vnode error in CodeSandbox

Open Divensky opened this issue 1 year ago • 2 comments

🐛 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:

Screenshot Error 2024-05-16 120705 Screenshot Error vnode 2 2024-05-16 120932

Your Environment

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

Divensky avatar May 16 '24 16:05 Divensky