[Gridsome] Site works perfectly in development mode but hangs if built

Hey All,

Recently moved a project over from Contentful to Storyblok and LOVING it.

Moved everything over to the pages > single file component architectured outlined in a few of the tutorials provided.

When I run the code locally using gridsome develop everything works fine. No console errors. All the component and content is rendering without issue.

If I build / deploy the site, however, the site “hangs” on load. Some above the fold content renders, but it can’t fully load - to the point where you can’t even right-click or view the console unless you use the menu.

Have also tried building / serving locally and experience the same hanging behavior.

I removed all post-build processes, css-inlining, tree-shaking, etc and still cannot figure out what’s going on. Has anyone else encountered this? Any tips to debug short of just starting over and going component by component?

Hey there!

We did not hear from that issue before I’m afraid. Would you mind sharing your (a stripped down version) code with us? we would love to investigate to see what happens at Gridsome at that stage, since everything is working on gridsome develop its unlikely that it would be connected to our APIs.

Best
Dominik

Hello!

Yeah of course! What’s the best way to share the code / build with you? It’s quite a big repository and I see I can’t use links. I have a preview deploy that I’d be happy to share as well as a public github repo.

I think I’ve isolated the issue to the Hero component. So digging into that now. If you see anything obvious please let me know : )

So, after many many rebuilds I finally found the issue, but don’t understand why it was causing the behavior it was.

I had a Hero component that looked like this.

<template>
  <section class="section hero">
    <div class="container">
      <div class="columns hero__columns">
        <div class="column is-7-tablet is-7-desktop hero__left">
          <div class="hero__text">
            <RichText :text="blok.Heading"></RichText>

            <!-- START Problem Section -->
            <p class="subtitle">
              <RichText :text="blok.SubHeading"></RichText>
            </p>
            <!-- END Problem Section -->

          </div>
          <div class="hero__cta">
            <JoinWaitlist />
          </div>
        </div>
        <div class="column is-5-tablet is-5-desktop hero__right">

          <v-lazy-image
            :src="blok.Image"
            src-placeholder="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
            class="hero__image"
          />
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import RichText from '~/components/RichText.vue'
import JoinWaitlist from '~/components/JoinWaitlist.vue'
import VLazyImage from 'v-lazy-image'

export default {
  props: ['blok'],
  components: {
    RichText,
    JoinWaitlist,
    VLazyImage
  }
}
</script>

I was able to figure out that if I built the site without the p.subtitle element wrapping the <RichText> component the problem went away. Is that because you can’t have child RichText element nested within a parent of the same type? IE in this case, it created a paragraph tag within a paragraph tag.

In case it matters here’s my RichText component:

<template>
  <div>
    <div v-html="richtext"></div>
  </div>
</template>

<script>
export default {
  props: ['text'],
  computed: {
    richtext() {
      return this.text ? this.$storyapi.richTextResolver.render(this.text) : ''
    }
  }
}
</script>

Hopefully this is useful to the team!