SyntaxError: Unexpected token 'export' Next Js

[gilperez]

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]

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]

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>
  )
}

 

[GreenSock]

Great, so you got it working, right @gilperez? 

[gilperez]

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]

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]

Specifically this article too!

https://blog.privjs.com/article/how-to-install-club-greensock-packages-on-vercel

[gilperez]

Thank you. i was just trying that one. I'll try it and see what happens. Thanks for your help!