Unable to deploy Next.js project on Vercel due to gsap.context issue

Duo · June 30, 2023

Hi,

Not sure if this is the right forum to ask this question but hoping that one of the many geniuses on here is able to provide assistance so here it goes.

I am having an issue when trying to deploy my Next.js project to Vercel and it seems to be occurring in the build process and more specifically to due with gsap.context()

This is my code inside my index.tsx page:

import { useRef } from 'react';
import dynamic from "next/dynamic"
import { montserrat } from '../utils/fonts'
import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/dist/ScrollTrigger"
import { ScrollSmoother } from "gsap/dist/ScrollSmoother"
import useIsomorphicLayoutEffect from '../utils/isomorphicEffect';
import Head from 'next/head'
import Image from 'next/image'
import styles from '@/styles/home.module.scss'
import profilePic from '@/images/dayne-profile-circle-new.png'
import gradientPic from '@/images/gradient-bg.jpg'

gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

export default function Home() {
  const smoother = useRef();
  const ctx = useRef();

  useIsomorphicLayoutEffect(() => {
    ctx.current = gsap.context(() => {
      smoother.current = ScrollSmoother.create({
        smooth: 2,
        effects: true,
      });
      ScrollTrigger.create({
        trigger: '#pinned-element',
        pin: true,
        start: 'top top',
        end: '+=5000',
        pinSpacing: false
      });
    });

    return () => ctx.current.revert();
  });


  return (
    <>
      <Head>
        <title>Online portfolio of web developer, Dayne Coulson-Hoffacker</title>
        <meta name="description" content="Online portfolio of web developer Dayne Coulson-Hoffacker" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link
          rel="icon"
          href="/favicon.png"
          type="image/png"
          sizes="any"
        />
      </Head>
      
      <div id="smooth-wrapper" className={styles.scrollWrapper}>
        <div id='smooth-content'>
          
        </div>
			</div>
			
    </>
  )
}

This code works perfectly on my local server (https://localhost:3000)

The issue is when I push changes to my repo and Vercel runs a build from those changes. I have attached the error message that I am being given from Vercel to this post.

Please, any React geniuses who can shed some light it would be greatly appreciated.

Thanks,

Dayne

Rodrigo · June 30, 2023

Hi,

Always run yarn/npm build before deploying (or any build command you have in your setup) in order to prevent this situation.

You can put the Context type definition there:

const ctx = useRef<gsap.Context>(null);

Hopefully this helps.

Happy Tweening!

Duo · June 30, 2023

Hi @Rodrigo

Thanks for the tip regarding running the build before deploying. Excellent tip.

I updated the code to this:

import { useRef } from 'react';
import dynamic from "next/dynamic"
import { montserrat } from '../utils/fonts'
import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/dist/ScrollTrigger"
import { ScrollSmoother } from "gsap/dist/ScrollSmoother"
import useIsomorphicLayoutEffect from '../utils/isomorphicEffect';
import Head from 'next/head'
import Image from 'next/image'
import styles from '@/styles/home.module.scss'
import profilePic from '@/images/dayne-profile-circle-new.png'
import gradientPic from '@/images/gradient-bg.jpg'

gsap.registerPlugin(ScrollTrigger, ScrollSmoother);

export default function Home() {
  const smoother = useRef();
  const ctx = useRef<gsap.Context>(null);

  useIsomorphicLayoutEffect(() => {
    ctx.current = gsap.context(() => {
      smoother.current = ScrollSmoother.create({
        smooth: 2,
        effects: true,
      });
      ScrollTrigger.create({
        trigger: '#pinned-element',
        pin: true,
        start: 'top top',
        end: '+=5000',
        pinSpacing: false
      });
    });

    return () => ctx.current.revert();
  });


  return (
    <>
      <Head>
        <title>Online portfolio of web developer, Dayne Coulson-Hoffacker</title>
        <meta name="description" content="Online portfolio of web developer Dayne Coulson-Hoffacker" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link
          rel="icon"
          href="/favicon.png"
          type="image/png"
          sizes="any"
        />
      </Head>
      
      <div id="smooth-wrapper" className={styles.scrollWrapper}>
        <div id='smooth-content'>
          <div className={styles.homeWrapper}>
            <div className={[`column`, styles["info"]].join(" ")} id="info-fixed">
              <div className={styles["info"]} id="pinned-element">
                <header>
                  <div className={styles["profile-pic"]}>
                    <Image
                      src={profilePic}
                      alt="Dayne Coulson-Hoffacker"
                    />
                  </div>
                  <h1 className={montserrat.className}>Dayne Coulson-Hoffacker</h1>
                </header>
                <footer>
                  <p>A collection of agency and private projects.</p>
                  &mdash;
                  <p><span>Dayne Coulson-Hoffacker</span></p>
                  &mdash;
                  <p>Web developer with over 12 years experience crafting WordPress sites + Shopify stores</p>
                  &mdash;
                  <p>
                    <a href="tel:3472765115">347 276 5115</a><br />
                    <a href="mailto:daynech88@gmail.com">daynech88@gmail.com</a>
                  </p>
                  &mdash;
                  <p>Brooklyn, NY</p>
                  &mdash;
                  <p><span>Currently available for a full-time position or freelance projects in the US</span></p>
                </footer>
              </div>
            </div>
            <div className={[`column`, styles["projects"]].join(" ")}>
              <ul className={montserrat.className}>
                <li>
                  <a href="https://www.fforme.com" target="_blank">
                    <span>FFORME</span><div className={styles.role}>— Front-end development<br />— Shopify development</div>
                  </a>
                </li>
                <li>
                  <a href="https://worldofreza.com/" target="_blank">
                    <span>Reza</span><div className={styles.role}>— Front-end development<br />— Shopify development</div>
                  </a>
                </li>
                <li>
                  <a href="https://www.theclasstwo.com/" target="_blank">
                    <span>The Class Two</span><div className={styles.role}>— UX/UI design<br />— Front-end development<br />— Wordpress development</div>
                  </a>
                </li>
                <li>
                  <a href="https://www.atmos.earth" target="_blank">
                    <span>Atmos</span><div className={styles.role}>— Front-end development<br />— Wordpress development</div>
                  </a>
                </li>
                <li>
                  <a href="https://www.eldetalle.co/" target="_blank">
                    <span>El Detalle</span><div className={styles.role}>— UX/UI design<br />— Front-end development<br />— Shopift development</div>
                  </a>
                </li>
                <li>
                  <a href="https://www.ewecare.com.au" target="_blank">
                    <span>Ewe Care</span><div className={styles.role}>— Front-end development<br />— Wordpress/WooCommerce development</div>
                  </a>
                </li>
                <li>
                  <a href="https://hartshorndistillery.com.au/" target="_blank">
                    <span>Hartshorn Distillery</span><div className={styles.role}>— Front-end development<br />— Wordpress/WooCommerce development</div>
                  </a>
                </li>
                <li>
                  <a href="https://grandvewe.com.au/" target="_blank">
                    <span>Grandvewe Cheese</span><div className={styles.role}>— Front-end development<br />— WordPress/WooCommerce development</div>
                  </a>
                </li>
                <li>
                  <a href="https://palmtreecrew.com/" target="_blank">
                    <span>Palm Tree Crew</span><div className={styles.role}>— Front-end development<br />— Shopify development</div>
                  </a>
                </li>
                <li>
                  <a href="https://soocd.com.au/" target="_blank">
                    <span>So OCD</span><div className={styles.role}>— UX/UI design<br />— Front-end development<br />— WordPress development</div>
                  </a>
                </li>
                <li>
                  <a href="https://theaftershock.org/" target="_blank">
                    <span>The Aftershock</span><div className={styles.role}>— UX/UI design<br />— Front-end development<br />— WordPress development</div>
                  </a>
                </li>
                <li>
                  <a href="https://bsidigital.com.au/" target="_blank">
                    <span>BSI</span><div className={styles.role}>— UX/UI design<br />— Front-end development<br />— WordPress development</div>
                  </a>
                </li>
                <li>
                  <a href="https://upstatestudios.com.au/" target="_blank">
                    <span>Upstate Studios</span><div className={styles.role}>— Front-end development<br />— Wordpress development</div>
                  </a>
                </li>
                <li>
                  <a href="https://thedermlab.com.au/" target="_blank">
                    <span>The Derm Lab</span><div className={styles.role}>— UX/UI design<br />— Front-end development<br />— WordPress development</div>
                  </a>
                </li>
                <li>
                  <a href="https://bamwine.com.au/" target="_blank">
                    <span>BAM Wine</span><div className={styles.role}>— UX/UI design<br />— Front-end development<br />— WordPress development</div>
                  </a>
                </li>
                <li>
                  <a href="https://terren.com.au/" target="_blank">
                    <span>Terren</span><div className={styles.role}>— UX/UI design<br />— Front-end development<br />— WordPress development</div>
                  </a>
                </li>
                <li>
                  <a href="https://studiolegal.com.au/" target="_blank">
                    <span>Studio Legal</span><div className={styles.role}>— Front-end development<br />— Wordpress development</div>
                  </a>
                </li>
                <li>
                  <a href="https://castleymccrimmon.co/" target="_blank">
                    <span>Castley McCrimmon</span><div className={styles.role}>— Front-end development<br />— Wordpress development</div>
                  </a>
                </li>
                <li>
                  <a href="https://leor.com.au/" target="_blank">
                    <span>Leor</span><div className={styles.role}>— Front-end development<br />— Wordpress development</div>
                  </a>
                </li>
                <li>
                  <a href="https://redhilltrailco.com.au/" target="_blank">
                    <span>Red Hill Trail Co</span><div className={styles.role}>— Front-end development<br />— Wordpress development</div>
                  </a>
                </li>
                <li>
                  <a href="https://makemodels.com.au/" target="_blank">
                    <span>Make Models</span><div className={styles.role}>— Front-end development<br />— Wordpress development</div>
                  </a>
                </li>
                <li>
                  <a href="https://sandkgroup.com.au/" target="_blank">
                    <span>S&K Group</span><div className={styles.role}>— Front-end development<br />— Wordpress development</div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div className={styles.canvas} id="canvasContainer"
          data-grid="15"
          data-mouse="0.13"
          data-strength="0.15"
        >
          <Image
            src={gradientPic}
            alt="Dayne Coulson-Hoffacker"
          />
      </div>
      
    </>
  )
}

But now I'm getting this error message when I run the build again:

Any help would be greatly appreciated. Thanks

Rodrigo · June 30, 2023

My bad, just remove null from it and should work:

const ctx = useRef<gsap.Context>();

Happy Tweening!

Duo · July 1, 2023

Hmm, that still didn't work @Rodrigo

It's still throwing out the same error message.

GSAP Helper · July 1, 2023

It's pretty tough to troubleshoot without a minimal demo - would you please provide one? That error message sounds very suspect. Are you sure that ctx is a Ref in your scenario? I'm not much of a React person, but I'm pretty sure ".current" isn't supposed to be read-only on a Ref.

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best.

Here's a Next.js starter template you can fork.

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.

Notifications

Messages

Unable to deploy Next.js project on Vercel due to gsap.context issue

Recommended Posts

Duo

Link to comment

Share on other sites

Rodrigo

Link to comment

Share on other sites

Duo

Link to comment

Share on other sites

Rodrigo

Link to comment

Share on other sites

Duo

Link to comment

Share on other sites

GSAP Helper

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members