Site works locally but shows blank page after deployment on Vercel

[lumia]

import React, { useEffect } from "react";
import { Link } from "react-router-dom";
import { ReactLenis } from "lenis/react";
import Transition from "../../components/transition/Transition";
import { useLanguage } from "../../LanguageContext";

import gsap from "gsap";
import { SplitText } from "gsap/SplitText";
import { ScrollTrigger } from "gsap/ScrollTrigger";


gsap.registerPlugin(ScrollTrigger);

const Vibeup = () => {
  const { language } = useLanguage();

  useEffect(() => {
    console.log("useEffect triggered");

    const observer = new MutationObserver((mutationsList, observer) => {
      for (let mutation of mutationsList) {
        if (mutation.type === 'childList') {
          const splitTextElement = document.querySelector(".split");
          console.log("Checking for .split element:", splitTextElement);
          if (splitTextElement) {
            observer.disconnect();
            let mySplitText = new SplitText(".split", { type: "chars" });
            let chars = mySplitText.chars;

            console.log("SplitText initialized", chars);

            gsap.from(chars, {
              yPercent: 130,
              stagger: 0.02,
              ease: "back.out",
              duration: 1,
              scrollTrigger: {
                trigger: '.split',
                start: "top 70%",
              }
            });
          }
        }
      }
    });

    observer.observe(document.body, { childList: true, subtree: true });

    return () => observer.disconnect();
  }, []);

Hello, I deployed my site to Vercel and added the token values to the environment variables. It works fine locally, but when I deployed it, the page just shows up blank—CSS works, but no content.

 

Did I miss something?

 

{
  "name": "linh-nguyen",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "framer-motion": "^11.3.30",
    "gsap": "npm:@gsap/shockingly@^3.12.7",
    "i18next": "^24.2.1",
    "lenis": "^1.1.13",
    "lucide-react": "^0.474.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-i18next": "^15.4.0",
    "react-router-dom": "^6.26.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.9.0",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.9.0",
    "eslint-plugin-react": "^7.35.0",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.9",
    "globals": "^15.9.0",
    "postcss": "^8.5.1",
    "tailwindcss": "^4.0.0",
    "vite": "^5.4.1"
  }
}

 

[Rodrigo]

Hi @lumia and welcome to the GSAP Forums!

 

That's really odd honestly, I've created a few react/next projects and deployed to vercel without any issues in the past. I assume that the deployment flow in Vercel is not failing, that it is completing without any errors, is that right?

 

That error for importing ScrollTrigger means that the package can't be found, but is really odd that you're not getting any errors for neither the gsap nor the SplitText imports, unless you have and you didn't include them.

 

Also is your i18n package working as expected with the JSON files for that? Can you actually see something rendered in the DOM or just the root element?

 

Have you tried a production build in your local machine and see if that works? Try that and see what happens.

 

If you could create a minimal demo it would be great so we can have a better look and give it a test.

 

Finally thanks for being a GSAP Club member and supporting GSAP! 💚