Nuxt.js: npm run dev works great. Generate is deleting components from DOM after the page loads?

Created on 29 Dec 2017 · 8Comments · Source: nuxt/nuxt.js

I have my static site temporarily hosted here to show the issue:
https://vibrant-hamilton-ce6e1c.netlify.com/blog/

My project: https://github.com/KyleTryon/VidFireBlog

my default.vue layout file looks like this, very simple.

<template>
  <div id="app-container">
    <vf-header/>
    <vf-nav/>
    <nuxt/>
    <vf-footer/>
  </div>
</template>

Everything works as expected on the dev server. However you can see if you visit the url above, the Header and Nav render and then delete themselves immediately.

There are no errors in console, and in the inspector, you can see the dom elements are actually completely removed.

_{This question is available on Nuxt.js community (#c2148)}

Source

KyleTryon

Most helpful comment

This can happen if the generated HTML mismatches the JS rendered HTML. You have probably experienced it even when running "npm run dev" (Child nodes mismatching message in console), but sometimes it only seems to happen in generated files.

Check if you don't have any improperly nested tags (usually block elements in inline, for example having an ul inside a or nuxt-link, etc.).

neonerd on 5 Jan 2018

🎉2 👍2

All 8 comments

If you disable javascript, the CSS is a little messed up but the elements stay on the page.

KyleTryon on 30 Dec 2017

Maybe some minify thing cause it ? last time i solve this problem with disable Cloudflare's minify but i dont know you have use it or not ,

hanjeahwan on 1 Jan 2018

@hanjeahwan the issue happens locally. It doesnt seem like the generated files are actually static as they should be.

KyleTryon on 1 Jan 2018

Check if you don't have any improperly nested tags (usually block elements in inline, for example having an ul inside a or nuxt-link, etc.).

neonerd on 5 Jan 2018

🎉2 👍2

@neonerd Great call! with that, I was able to identify which component was causing the issue and correct it. The items no longer vanish.

However. I see now, the CSS is damaged in the static version. Again, rendering beautifully in developer mode. I don't suppose you know any more secrets? Might scoping have anything to do with it?

KyleTryon on 9 Jan 2018

Nuxt 1.1.1 automatically corrected the issue.

KyleTryon on 14 Jan 2018

I'm still having this issue as of v1.4.x. However, I'm not seeing any such warnings. Elements simply get removed from the DOM in production after scripts load (SSR / static). Is there any way to easily identify what components are causing the problem? Everything renders absolutely fine using the local server (nuxt / npm run dev)