Strange GSAP Console Errors

[connor.online]

Hey all,

I haven't changed any animations on my site in a few days and was just adding a moment.js instance to a Contact page (seemingly unrelated, I'm aware) when all of a sudden I started getting console errors and a blank screen. Most had to do with GSAP but a few seemed like my entire App had been disconnected from the index.js page. I know not all of this is purely GSAP related but I'm curious if the GSAP errors caused the others. After cleaning up some potentially problematic GSAP context, nothing was working so I "git reset --hard" to a point in the tree that I knew everything was fine at. Yet all the same console errors persisted. I even went back to the Develop branch and somehow that'd been corrupted as well. I realize it's hard to troubleshoot without a CodePen but I can't figure out an efficient way to upload an entire React project that isn't the main branch. If you see anything that looks familiar please let me know, thanks 😕
The errors are as such:

Uncaught TypeError: gsap__WEBPACK_IMPORTED_MODULE_3__.default.context is not a function
    at index.js:91:1
    at commitHookEffectListMount (react-dom.development.js:23049:1)
    at commitPassiveMountOnFiber (react-dom.development.js:24816:1)
    at commitPassiveMountEffects_complete (react-dom.development.js:24781:1)
    at commitPassiveMountEffects_begin (react-dom.development.js:24768:1)
    at commitPassiveMountEffects (react-dom.development.js:24756:1)
    at flushPassiveEffectsImpl (react-dom.development.js:26990:1)
    at flushPassiveEffects (react-dom.development.js:26935:1)
    at performSyncWorkOnRoot (react-dom.development.js:26032:1)
    at flushSyncCallbacks (react-dom.development.js:12009:1)

 

Uncaught TypeError: gsap__WEBPACK_IMPORTED_MODULE_4__.gsap.context is not a function
    at index.js:17:1
    at commitHookEffectListMount (react-dom.development.js:23049:1)
    at commitPassiveMountOnFiber (react-dom.development.js:24816:1)
    at commitPassiveMountEffects_complete (react-dom.development.js:24781:1)
    at commitPassiveMountEffects_begin (react-dom.development.js:24768:1)
    at commitPassiveMountEffects (react-dom.development.js:24756:1)
    at flushPassiveEffectsImpl (react-dom.development.js:26990:1)
    at flushPassiveEffects (react-dom.development.js:26935:1)
    at performSyncWorkOnRoot (react-dom.development.js:26032:1)
    at flushSyncCallbacks (react-dom.development.js:12009:1)

 

The above error occurred in the <Menu> component:

    at Menu (http://localhost:3000/static/js/bundle.js:376:64)
    at div
    at App
    at Router (http://localhost:3000/static/js/bundle.js:74955:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:73764:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

 

The above error occurred in the <Intro> component:

    at Intro (http://localhost:3000/static/js/bundle.js:159:64)
    at Routes (http://localhost:3000/static/js/bundle.js:75022:5)
    at div
    at App
    at Router (http://localhost:3000/static/js/bundle.js:74955:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:73764:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo, but it sounds like you've got an old version of GSAP maybe? gsap.context() was introduced in 3.11.0. 

 

If you're still having trouble, please provide a minimal demo that clearly shows the issue and we'd be happy to take a peek. 

 

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. 

[connor.online]

@gsap Ah, I just figured out how to switch branches on CodeSandbox, so here it is!

The GSAP version was up to date so perhaps someone will spot something else clearly wrong with the code. Thanks in advance!

[GSAP Helper]

Unfortunately that link isn't public. It forces viewers to activate/authorize using their Github account or something. Could you provide a public/accessible minimal demo please? 

 

[connor.online]

Jesus Christ. Forget it. Thanks anyway

[Rodrigo]

Hi Connor,

 

We understand the frustration of seeing errors and not understanding where they come from and how to solve them. I saw a similar post in stack overflow a few hours ago. I assume you haven't got an answer there yet. That being said the whole idea of insisting in a minimal demo that anyone can look at is understandable, since not everyone might be comfortable providing access to a private account, regardless of the security of Codesandbox that, in my case, raises no questions. As we understand the frustration, please make your best effort in understanding our position in that matter as well. GSAP forums are a place of cordiality where every user is treated with the utmost respect and consideration. We also understand that given the complexities of your project creating a simple example might be a little out of the question.

 

Luckily I do have a codesandbox account so I was able to look at your live sample. Unfortunately I'm not getting any errors in the console while looking at it 😅. The only console error I get is related to THREE.WebGLRenderer: Context Lost, which has nothing to do with what you're reporting.

 

Also is worth noticing that moment.js is no longer maintained and Day.js is considered a better alternative whose API is quite similar to Moment.

 

The few things I could suggest is to review is the fact that you have two different useEffect hooks in that file that are using an empty dependencies array, that should go in just one use effect hook. Also remove all references in your code to GSAP's Context (which I don't think might be the source of your issues) and see what happens. Also try creating and running a production build in your local machine and see if you get errors there.

 

Finally I'm not an NPM expert but another alternative could be remove moment.js, delete the package-lock.json file delete the node_modules folder and install everything again. Or perhaps just try in a different folder, copy everything except the packag-lock file and the node_modules folder and run a fresh installation without a git init and see what happens.

 

Let me know how it goes.

 

Happy Tweening!!!

[connor.online]

Hey @Rodrigo,

Sorry, wasn't trying to spread bad vibes, my anguish was more directed at the fact that I couldn't find any relevant info on how to publicly expose that branch in the repository. I do appreciate any and all help troubleshooting as always, especially on an open source library. Thanks for the suggestions!

-Connor