gilperez Posted July 5, 2022 Posted July 5, 2022 Hi, I just joined the club. I installed via NPM. I'm using NextJs. Packages seemed to be installed correctly, but when I implement it in my file I get the "unexpected token 'export' Error. Any thoughts or solutions would be appreciated.
GreenSock Posted July 5, 2022 Posted July 5, 2022 Welcome to the club, @gilperez! ? Perhaps these threads will help you: I'm not at all familiar with Next.js but my guess is that you're importing the module files but your build tool doesn't recognize ES Modules? So you can import from the /dist/ directory to get the UMD files instead. Here's a starter template on CodeSandbox in case it helps: https://codesandbox.io/s/gsap-next-js-starter-jekrn
gilperez Posted July 5, 2022 Author Posted July 5, 2022 Thanks for the quick response. Using the gsap/dist/ worked but only after i implemented the ScrollTrigger (Which ScrollSmoother seems to be dependent on) and implementation of a useEffect. Here is my final code. import React from 'react' import Footer from './Footer' import Header from './Header' import { useRouter } from 'next/router' import { useEffect } from 'react' import { gsap } from 'gsap/dist/gsap' import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' import { ScrollSmoother } from "gsap/dist/ScrollSmoother" export default function Layout({ children }) { gsap.registerPlugin(ScrollTrigger, ScrollSmoother) useEffect(() => { const smoother = ScrollSmoother.create({ wrapper: "#smooth-wrapper", content: "#smooth-content", }) return () => { smoother } }, []) const router = useRouter() return ( <div id='smooth-wrapper' className='grid grid-cols-[1fr] w-full'> <div id='smooth-content' className={router && router.pathname === '/more' ? 'darkmode' : 'lightmode'}> {router.pathname !== '/posts/[slug]' && router.pathname !== '/projects/[slug]' ? <Header /> : ''} <div className='grid py-40 w-auto p-5'>{children}</div> <Footer /> </div> </div> ) }
gilperez Posted July 6, 2022 Author Posted July 6, 2022 Yes, I did! But now i'm trying to figure out how to deploy it to Vercel. I keep getting this error ( Module not found: Can't resolve 'gsap/dist/ScrollSmoother' in '/vercel/path0/src/components' 21:28:49.322 ) Is there something i need to do when deploying because i'm a member and am using the token? Any ideas?
GreenSock Posted July 6, 2022 Posted July 6, 2022 I'm totally unfamiliar with Vercel, but perhaps one of these links will help(?): https://blog.privjs.com/article/how-to-install-club-greensock-packages-on-vercel
Cassie Posted July 6, 2022 Posted July 6, 2022 Specifically this article too!https://blog.privjs.com/article/how-to-install-club-greensock-packages-on-vercel
gilperez Posted July 6, 2022 Author Posted July 6, 2022 Thank you. i was just trying that one. I'll try it and see what happens. Thanks for your help! 1
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now