bobmalice Posted February 18, 2022 Share Posted February 18, 2022 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) Link to comment Share on other sites More sharing options...
Solution OSUblake Posted February 18, 2022 Solution Share Posted February 18, 2022 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"; Link to comment Share on other sites More sharing options...
bobmalice Posted February 18, 2022 Author Share Posted February 18, 2022 Genius! Thanks so much that did it! 😄 1 Link to comment Share on other sites More sharing options...
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