Jump to content
GreenSock

SteveS

ScrollSmoother causing error in react - "The node to be removed is not a child of this node"

Go to solution Solved by SteveS,

Recommended Posts

  • Solution

ScrollSmoother has been really great so far, and I have had no real issues in react until I implemented page navigation. I use a small library called wouter to navigate pages which works effectively the same as react-router but in a smaller package. Upon making my first page navigation, I was crashing with the error 'NotFoundErrror: Failed to Execute 'removeChild' on 'Node': The node to be removed is not a child of this node.'

 

Digging around on the forum, I found several posts on the same issue, specifically regarding ScrollTrigger and pinning elements. Basically, when something gets pinned, GSAP creates a container, and when it comes time to unmount the component, if you don't clean up correctly it freaks out. Don't really know why.

Anyway, I'm definitely cleaning up all my scroll triggers, so that shouldn't be the issue. On top of that my error was pointing me towards my home page index file. The only thing I am doing in that file is creating and cleaning up my ScrollSmoother. Sure enough, disabling the scroller resolves the issue. I figured somehow I wasn't cleaning up correctly, or trying to kill tweens/scrollTriggers that didn't exist, but playing around with those didn't help.
 

It finally occurred to me that, much like pinning, ScrollSmoother creates a 'smooth-wrapper' div around your 'smooth-content' element if you don't do it yourself. After setting a wrapper in my SmoothScroller and writing it into react, my problem is solved. Hopefully this post can save others some time in the future.

  • Thanks 2
Link to comment
Share on other sites

Very kind of you to share your findings here, @SteveS🙌

 

Yeah, React is odd when it comes to DOM manipulation like that. Do you mind me asking what line triggered that error? I'm searching the source for .removeChild() to add some extra checks, but I'm not finding a spot where that error would likely be thrown. You're on the latest version too, right? 3.10.4?

Link to comment
Share on other sites

I am using 3.10.4

Screenshot of the error:
image.png.1611c964d0bcd6f806cfb9686462d63b.png

Link to comment
Share on other sites

Yeah, that doesn't really help but thanks anyway :)

 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×