GSAP Target null not found in Production, not development

[erikKay]

Hi all!

 

I'm working on a preact site using gsap for a variety of animations and transitions. I implemented a cursor "follower" recently and when I added it to the production site I got a  "GSAP Target null not found". I am initializing the ref to Null so it appears as though something is working with ref.current before it's in the DOM.

 

I have been checking to make sure that the element is in the DOM before triggering any effects with GSAP, just to make that clear off the bat.

 

What is odd is that I don't get the error when running in development.

 

This is preventing the execution of all tweens on the page. I go to remove the new component, only to find that it appears all the tweens are now broken.

 

Any ideas?

[GSAP Helper]

Welcome to the forums, @erikKay. 

 

This certainly sounds like an issue with your setup/framework/build tool. For some reason, the element you're trying to animate doesn't exist when your GSAP-related code is being executed. 

 

It's pretty tough to troubleshoot without a minimal demo. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[SteveS]

@erikKay If you are using react 18, make sure you have strict mode disabled, and make sure that the tweens are firing in a useLayoutEffect. If it still doesn't work you'll need to explain more in depth what you are doing or create a demo.

[erikKay]

Thanks for your time. It was a bug with the compiler. For some reason the compiled development code was hoisting something that really shouldn't have been hoisted. (a named arrow func). Then in production the engine was hitting the error. Very difficult to track down lol. 

 

Thanks again for your swift reply, I will always recommend gsap for it's quality, excellent docs and even better community of maintainers!