Nuxt/Buefy - <client-only> component shows inconsinstently-CodePudding

I have a really weird issue in my Nuxt/Buefy project. I have a component, site-header, which loads a child component, user-location for client-side only use, like so:

components/site-header.vue

<template>
  <div class=header-wrapper>
    <div class=container>
      <b-navbar centered class=navbar>
        <template #end>
          <nav-link v-for='(obj, token) in $store.state.siteNav' :navItemObj=obj :key=token :id=token />
          <client-only>
            <user-location usage=siteHeader />
          </client-only>
        </template>
      </b-navbar>
    </div>
  </div>
</template>

The problem I've got is user-location shows momentarily on hot reload, but never shows when I load/refresh the page.

However, if I move it outside of b-navbar, it shows every time.

<template>
  <div class=header-wrapper>
    <div class=container>
    <nav-link v-for='(obj, token) in $store.state.siteNav' :navItemObj=obj :key=token :id=token />
    <client-only>
      <user-location usage=siteHeader />
      </client-only>
    </div>
  </div>
</template>

What could account for this? One thing which may or may not be related: this was working fine until I deleted my node_modules dir to reinstall everything.

CodePudding user response：

Yeah, I did noticed some issues like this too on some of my projects.
I'd say that this issue is mainly coming from HMR not being able to detect that we don't really need it and still injects it inside of your template or maybe the fact that Webpack's bundle is huge in your project.
At least, this bug never happens on production so it should be okay!

Either ways, Nuxt v3 will soon be released and it will be available with Vite, so I'm not sure that we will have those issues anymore looking on the way it works.

Othwerwise, you could maybe dive deep in the configuration of HMR and make some conditional to see if some (nested) block was updated in <client-only>.
There is meanwhile probably no quick and simple way of fixing this.

CodePudding user response：

If its SSR, then there are multiple causes it shows black page.

One of the reason is elements are not closed properly. So try to close them in proper manner.

Do this:

<user-location usage="siteHeader"></user-location> // also, added quotes to "siteHeader" - Ideally it should be there

Instead of :

<user-location usage="siteHeader" />

This might fix the issue :)