Netlify deploy preview With Vite + VueJS `container not found`

Hi all,

After looking for several hours, I don’t find any answer to my issue that look so simple but go in deep behaviour of great tools.
I use the deploy preview of my project here https://deploy-preview-2--staging-togetherdo.netlify.app/ and I have the error in console netlify.js: container not found. that I totally get because actually the all Netlify inserted tag is remove somewhere in the process! I know this because in sources of dev console I see the tag, but in resulted elements after loading, the div has disappeared (cf screenshots attached).

Do you have any ideas why this could happened ?
What I have tried so far:

  • Make a div around my root app element
  • Waiting for DOMContentLoaded before mounting the app

Thank you in advance :pray:

I found the reason. It was due to the use of <div /> syntax.

<div id="app">
  <div />
</div>
<div id="another"></div>

Is interpreted in the browser in the following:

<div id="app">
  <div>
     <div id="another"></div>
  </div>
</div>

Therefore, when my app was mounted, the Netlify div was inside the div of mount and erased.
I don’t know why this is happening though. If you have the specification for that I’d be glad to have the info :slight_smile: (not related to Netlify but could be cool to know)

Hey there, @JonLev :wave:

Thanks so much for coming back and sharing your solution! It will definitely be helpful for Forums members who encounter the same obstacle. I cannot speak to why this has happened, but I will leave this thread open to comments so that anyone with further insights can chime in.

Happy building, and thanks again for sharing this!