SyntaxError: Unexpected token 'export' in ScrollTrigger (Next.js)

[bobmalice]

Hello,

I've used similar code in react before, but for some reason in Next.js, even simply importing ScrollTrigger causes this error. Here's some code:

 

import React, { useEffect, useRef } from 'react'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

import styles from '../../styles/Store.module.css'

const Store = () => {
  gsap.registerPlugin(ScrollTrigger)

  const store = useRef(null)
  const trig = useRef(null)
  useEffect(() => {
    let zoom = gsap.timelite({
      scrollTrigger: {
        trigger: trig.current,
        start: 'top top',
        end: 'bottom top',
        scrub: true,
        pin: true
      }
    })
    zoom.to(store.current, {
      scale: 3
    })
  }, [])

  return (
    <div id='' className='w-full bg'>
      <div id='longscroll' className='toReveal' ref={trig}></div>
      <div id={styles.intro} className='toMove'>
        <h1>Blah blah</h1>
        <h2>
          blah blah
        </h2>
      </div>
      <div className='container' ref={store}>
        <div id={styles.storebg} className='toMove'></div>

        <h1 id={styles.storename} className='toMove fancy-font'>
          blah blah
        </h1>
        <h2 id={styles.storesign} className='toMove fancy-font'>
          blaaaaaaaaaaaaaaaah
        </h2>
      </div>
    </div>
  )
}
export default Store

I've tried not registering ScrollTrigger, moving the registering around, but nothing seems to do the trick. Here's most of the call stack:

 

Server Error

SyntaxError: Unexpected token 'export'
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:/home/HEHEHE/node_modules/gsap/ScrollTrigger.js (825)
Object.compileFunction
node:vm (352:18)
wrapSafe
node:internal/modules/cjs/loader (1025:15)
Module._compile
node:internal/modules/cjs/loader (1059:27)
Object.Module._extensions..js
node:internal/modules/cjs/loader (1147:10)
Module.load
node:internal/modules/cjs/loader (975:32)
Function.Module._load
node:internal/modules/cjs/loader (822:12)
Module.require
node:internal/modules/cjs/loader (999:19)
require
node:internal/modules/cjs/helpers (102:18)
Object.gsap/ScrollTrigger
file:/home/HEHEHE/.next/server/pages/index.js (175:18)

 

[OSUblake]

Welcome to forums @bobmalice

 

Next.js does not currently support ES Modules, it's still experimental, so you'll need to import the UMD files from the dist folder.

 

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

 

[bobmalice]

Genius! Thanks so much that did it! 😄