Nuxt 3 npm run generate build fails prerender

[MarkD617]

I have a simple scrollTrigger / gsap animation using Nuxt 3, all is working as expected. My issue is when I run npm run generate the build is failing, I'm led to believe its my gsap setup or config as If I remove them it builds on all occasions. Is there anything that could be changed with this setup? Do I need to check if process.client?

 

<script setup>
/*
imports
*/
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

onMounted(() => {
  let matchScreenWidth = gsap.matchMedia();

  const createCtaAnimation = (yValue) => {
    return {
      y: yValue,
      stagger: 0.2,
      scrollTrigger: {
        trigger: '.container-content--ctas',
        start: 'top-=150',
        toggleActions: 'play none none none',
      },
    };
  };

  matchScreenWidth.add('(min-width: 1200px)', () => {
    gsap.to('.cta-animate-up', createCtaAnimation(-60));
  });

  matchScreenWidth.add('(max-width: 1199px)', () => {
    gsap.to('.cta-animate-up', createCtaAnimation(-30));
  });
});

onUnmounted(() => {
  ScrollTrigger.getAll().forEach((trigger) => trigger.kill());
});
</script>

   <div
            class="grid grid-cols-2 mt-[70px] gap-3 xs:gap-7 lg:grid-cols-4 sm:max-w-[420px] w-full mx-auto lg:max-w-full"
          >
            <CtaAnimateUp
              v-for="item in cta"
              :key="item.linkTitle"
              :image="item.image"
              :linkTo="item.link"
            >
              <template #linkTitle>
                <span v-html="item.linkTitle"></span>
              </template>
            </CtaAnimateUp>
          </div>

 

[GreenSock]

It's very difficult to troubleshoot without a minimal demo (like a Stackblitz), but I'd recommend changing your imports - see if either of these works: 

import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

-OR-

// UMD
import gsap from 'gsap/dist/gsap'
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'

What error are you seeing?