Error in production but nothing when working in localhost

[6la6T]

Hi,

 

I start a React project using GSAP. Everything works perfectly when working in localhost.

But I wanted to share the project using Netlify.

When I go to the page it gives me an error :

TypeError: r.utils.checkPrefix is not a function
    at Function.e.register (ScrollTrigger.js:1441)
    at nt (gsap-core.js:999)
    at gsap-core.js:3540
    at Array.forEach (<anonymous>)
    at Object.registerPlugin (gsap-core.js:3539)
    at HeroBanner.js:19
    at Dl (react-dom.production.min.js:262)
    at t.unstable_runWithPriority (scheduler.production.min.js:18)
    at Hi (react-dom.production.min.js:122)
    at Il (react-dom.production.min.js:261)

I only used gsap.from() and gsap.to() with the scrollTrigger register pluggin.

You can see exactly the error here Netlify Project Link  in the console

 

I don't really understand from where it's from and how to fix it... If somebody could help me

[ZachSaucier]

Hey 6la6T and welcome to the GreenSock forums. I'm guessing that this is because you forgot to register ScrollTrigger.

 

Can you share the full code of the component that uses GSAP with us? 

[6la6T]

23 minutes ago, ZachSaucier said:

Hey 6la6T and welcome to the GreenSock forums. I'm guessing that this is because you forgot to register ScrollTrigger.

 

Can you share the full code of the component that uses GSAP with us? 

 

Hi Zach, 

Thanks for your answer !

 

I did register ScrollTrigger but I saw that it's maybe a build issue...

 

Here is my component code : 

 

import { ScrollTrigger } from 'gsap/all';
import gsap from 'gsap/gsap-core';
import React, { useEffect } from 'react'

export default function ServicesBanner () {
    useEffect(() => {
        gsap.registerPlugin(ScrollTrigger)

        gsap.to(".services_banner_article", {
            scrollTrigger: {
                trigger: ".services_banner",
                start: "20% 10%",
                scrub: 0.3
            },
            y : 50,
            opacity: 0
        })
        gsap.to(".services_banner_img", {
            scrollTrigger: {
                trigger: ".services_banner",
                start: "20% 10%",
                scrub: 0.3
            },
            y : -200,
            opacity: 0,
        })
    })

    return (
        <section className="services_banner">
            <div className="services_banner_img">
            </div>
            <article className="services_banner_article">
                <div className="services_title_wrapper">
                <h1 className="page_title">Conception de site internet sur mesure.</h1>
                <p>Faites de votre projet le reflet de votre image tout en vous démarquant sur Internet.</p>
                </div>
            </article>
        </section>
    )
}

 

[ZachSaucier]

A couple things stick out to me:

• The more standard way of importing GSAP and ScrollTrigger (as covered in the installation doc) is this:

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

• Your useEffect will re-run every time that your component is updated, creating duplicate tweens and ScrollTriggers. You should pass in an empty array to the useEffect as the second parameter so that it only runs once:

  useEffect(() => {
    // ...
  }, [])

   

[6la6T]

@ZachSaucier thanks a lot you solved it. 

 

Any idea why it was perfectly working in Locahost (when using "gsap/all" and "gsap/gsap-core") but not with the Netlify build  ?

[ZachSaucier]

I'm not much of a modules user. Maybe @OSUblake or @GreenSock knows why the above works better than what he had originally?

[OSUblake]

You were importing from gsap-core, so the CSSPlugin gets dropped during a production build. gsap-core is only intended for rare builds, like where you only plan on animating canvas objects.

 

[6la6T]

@OSUblake ok thanks for your informations 👌