bobmalice
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by bobmalice
-
-
Genius! Thanks so much that did it! 😄
- 1
-
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)
Production Mode Missing Plugin Error in Next.js
in GSAP
Posted
GSAP is working beautifully in dev mode. When I try to build my next.js app however, I get a most cryptic error. Here's the relevant part:
And here's the relevant code:
I'm pretty sure I don't need to import { ScrollTrigger} here, but when I don't I get the same exact error, so it was my attempt at fixing it. For reference, a few different components that are using ScrollTrigger call shake() onMouseOver.. I imported and registeredPlugin everywhere else where needed. (Side question is that necessary or should I only register in once?)
What's my next step? Thanks