Search code examples
javascriptvue.jsnuxt.jsnuxt-content

NuxtJS: routes working in dev but not production (netlify)

Still very much learning JS, but I'm struggling with this issue.

In the VS code debug environment, everything works, but when I deploy to Netlify, some routes work only sometimes. For example, this route, along with the other /interests routes, either 404s, loads a blank page, or occasionally just works.

The code behind those pages is here. The other nuxt-content pages in /posts, /tags, and /wip all work fine.

I get no errors that I can see related to this in the dev environment. I'm still new to js troubleshooting, but when I load up dev tools in Chrome, I sometimes see an error "DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method."

I've researched that error leading me to a few posts on the topic:

I've tried various solutions from there including replacing v-if with v-show, and cleaning up <p> tags, and wrapping various things in <client-only> but the problem persists.

Anyone have insight into what I'm doing wrong?

Solution

  • I solved your issue, the fixed blog can be seen here
    https://brians-spare-time-blog.netlify.app/interests/film-photography/

    In your Sidebar.vue file you do have

    <template>
  <div class="sidebar">
    <div
      v-if="isPanelOpen"
      class="sidebar-backdrop"
      @click="closeSidebarPanel"
    />
    <transition name="slide">
      <div v-if="isPanelOpen" class="sidebar-panel">
        <slot />
      </div>
    </transition>
  </div>
</template>

    The slot is then used into a layouts/default.vue with the following

    <Sidebar>
  <ul class="sidebar-panel-nav" @click="closeSidebarPanel">
    <li>
      &#8226;
      <nuxt-link to="/interests/film-photography">
        Film Photography
      </nuxt-link>
    </li>
  </ul>
</Sidebar>

    So, Nuxt crawler should be able to generate it but for some reason, having

    <div v-if="isPanelOpen">

    is a blocker for him. This probably have to do with the way you're managing your Vuex store here. You could debug more in depth to see why this is not handling the state properly, nuxtServerInit could be useful for this.

    Meanwhile, here is a quick fix

    <div v-show="isPanelOpen">

    This way, the sidebar will always be in the DOM and it helps the crawler doing it's job properly. As you can see, your blog is now live.

    Using yarn generate could be a quick debugger because it will point out if the page you're wanting is actually generated or not.

    enter image description here

    Otherwise, you could also generate the pages manually in your nuxt.config.js but this is pretty overkill in your situation.

    PS: you do have some ESlint errors in your nuxt.config.js, build key.
    I do recommend fixing those. Or any ESlint errors tbh.