Search the Community
Showing results for tags 'vercel'.
Found 3 results
-
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
-
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" } }
-
Hey all - I've been struggling to deploy a test project via Vercel, I can get the app to build but only when using the command: 'npm install gsap' If I use 'npm install gsap@npm:@gsap/business' or any other such as 'npm install gsap@npm:@gsap/shockingly' or 'npm install gsap@npm:@gsap/premium' then I get 403 errors: [17:29:08.248] Running build in Washington, D.C., USA (East) – iad1 [17:29:09.522] Cloning github.com/cyberpatrolunit/videoglove_landing (Branch: main, Commit: 4f8dc0d) [17:29:09.536] Skipping build cache, deployment was triggered without cache. [17:29:10.074] Cloning completed: 551.358ms [17:29:10.396] Running "vercel build" [17:29:10.902] Vercel CLI 32.6.1 [17:29:11.777] Running "install" command: `npm install gsap@npm:@gsap/premium`... [17:29:24.884] npm WARN ERESOLVE overriding peer dependency [17:29:38.358] npm ERR! code E403 [17:29:38.362] npm ERR! 403 403 Forbidden - GET https://npm.greensock.com/@gsap%2fpremium - bad authorization header. Please login again [17:29:38.362] npm ERR! 403 In most cases, you or one of your dependencies are requesting [17:29:38.363] npm ERR! 403 a package version that is forbidden by your security policy, or [17:29:38.363] npm ERR! 403 on a server you do not have access to. [17:29:38.365] [17:29:38.366] npm ERR! A complete log of this run can be found in: /vercel/.npm/_logs/2023-12-11T01_29_12_236Z-debug-0.log [17:29:38.414] Error: Command "npm install gsap@npm:@gsap/premium" exited with 1 I have a '.npmrc' in my root dir with : always-auth=true @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken={my_token} Send I've poked around finding similar issues but I still can't get authenticated.. Any insight would be greatly appreciated !
