Production Mode Missing Plugin Error in Next.js

[bobmalice]

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:

Invalid property rotateZ set to -10 Missing plugin? gsap.registerPlugin()
Invalid property transformOrigin set to bottom left Missing plugin? gsap.registerPlugin()
info  - Generating static pages (23/23)

> Build error occurred
Error: Export encountered errors on following paths:
        /scripts/scripts

And here's the relevant code:

 

import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)

const shake = element => {
  gsap.to(element, {
    rotateZ: -10,
    duration: 0.125,
    transformOrigin: 'bottom left'
  })
  gsap.to(element, {
    rotateZ: 5,
    delay: 0.5,
    scale: 1
  })
}

export default shake

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

[GreenSock]

I haven't heard of that before, but it sounds like your build process is getting way too aggressive and dropping CSSPlugin (which is in the core). It's very difficult to troubleshoot blind, though. 

 

Maybe try changing your first 3 lines to this: 

import { gsap, CSSPlugin } from 'gsap/dist/gsap'
import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
gsap.registerPlugin(CSSPlugin, ScrollTrigger)

🤷‍♂️