6la6T Posted February 23, 2021 Share Posted February 23, 2021 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 23, 2021 Share Posted February 23, 2021 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? Link to comment Share on other sites More sharing options...
6la6T Posted February 23, 2021 Author Share Posted February 23, 2021 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> ) } Link to comment Share on other sites More sharing options...
Solution ZachSaucier Posted February 23, 2021 Solution Share Posted February 23, 2021 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(() => { // ... }, []) 1 1 Link to comment Share on other sites More sharing options...
6la6T Posted February 23, 2021 Author Share Posted February 23, 2021 @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 ? Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 23, 2021 Share Posted February 23, 2021 I'm not much of a modules user. Maybe @OSUblake or @GreenSock knows why the above works better than what he had originally? 1 Link to comment Share on other sites More sharing options...
OSUblake Posted February 23, 2021 Share Posted February 23, 2021 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. 4 Link to comment Share on other sites More sharing options...
6la6T Posted February 23, 2021 Author Share Posted February 23, 2021 @OSUblake ok thanks for your informations 👌 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