Nuxt.js: Nuxt generate: Missing first item in v-for loop

[pirony]

Hi,
I'm facing a weird issue with a nuxt generated app and a plugin I'm creating.

<template>
  <div id="app">
    <top-nav/>
    <ksvuefp :options="options" :sections="sections">
      <ksvuefp-section
        v-for="(section,index) in sections"
        :section="section"
        :key="section"
        :sectionIndex="index"
        :background-color="section"
      >
      <h2>{{ section }}</h2>
      </ksvuefp-section>
    </ksvuefp>
  </div>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      sections: ['red', 'blue', 'green'],
      options: { }
    }
  }
}
</script>

When using nuxt dev no problem, everything is rendered correctly. But once generated, instead of having 3 sections mounted... I only have 2. The first one is missing. The weirdest is that on loading, this section seems to be mounted, but dieappears when the app is totally loaded...

My components code:

ksvuefp-section.vue

<template>
  <component :is="options.animationType" :options="options" :appear="false">
    <tagger :sectionIndex="sectionIndex" :options="options" class="ksvuefp-section" :style="{ backgroundImage: backgroundImage || '', backgroundColor: backgroundColor || '' }" v-show="sectionIndex === $ksvuefp.currentIndex">
      <span class="ksvuefp-section__overlay" :style="{ background: options.overlay || 'rgba(0,0,0,0.2)' }" v-if="options.overlay"></span>
      <div class="ksvuefp-section__content">
        <slot></slot>
      </div>
    </tagger>
  </component>
</template>

<script>
import { slideY, slideX, fade } from '../ksvuefp-animations'
import imagesLoaded from 'imagesloaded'
export default {
  components: {
    slideY,
    slideX,
    fade,
    'tagger': {
      props: ['options', 'sectionIndex'],
      render (h) {
        return h(this.options.sectionTag || 'div', this.$slots.default)
      },
      mounted () {
        const vm = this
        vm.$nextTick(() => {
          imagesLoaded(vm.$el, { background: true }, () => {
            vm.$ksvuefp.$emit('ksvuefp-section-loaded', vm.sectionIndex)
          })
      }
    }
  },
  data () {
    return {
      options: this.$ksvuefp.options || [ ]
    }
  },
  props: ['section', 'backgroundImage', 'backgroundColor', 'sectionIndex']
}
</script>

Any idea of what could cause the issue? I'm banging my head on the wall since hours ahaha

_{This bug report is available on Nuxt.js community (#c1622)}

[vegan0206]

I have also encountered a similar situation with you. When the page is loaded, the first line of the form disappears. I hope someone can help us with it. A detailed description of the problem is presented: https://github.com/iview/iview/issues/2042

[pirony]

I forked the starter-template project, you can reproduce the issue using

$ vue init pirony/starter-template bug-repro-folder
$ cd bug-repro-folder
$ npm install
$ npm run generate

and start a http-server from /dist folder

As you can see, there is only 3 sections mounted instead of 4... but when I log this.sections in mounted hook, it prints the entire array. Datas are there, but not rendered.
It only happens when the site is generated, not when using nuxt dev

You can find the code of the ksvuefp-section component here

Hope we'll find where the issue comes from (pretty sure it comes from my side), as I use Nuxt for every static projects, even for the demo of the plugin...

Thanks

[Atinux]

#1807

[clarkdo]

It really took me hours to debug this issue :smile:, it's a hydration issue, the compiled ks-vue-fullpage preserved spaces ,you may try to add this in nuxt.config.js

 build: {
    extend (config, ctx) {
      const vueLoader = config.module.rules.find(rule => rule.loader === `vue-loader`)
      vueLoader.options.preserveWhitespace = true
    }
}

[Atinux]

Hi there,

Actually it's the same issue as #1552, here's the workaround, it's fixed in the next release: https://github.com/nuxt/nuxt.js/issues/1552#issuecomment-341729165

[timrijkse]

@clarkdo Thanks for the tip! Took me hours to find a solution. For my own understanding, why would preserveWhitespace cause hydration issues?

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.