Jump to content
Search Community

React 18.2.0 and Draggable issue

chrisgannon test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

I am trying to use Draggable with GSAP 3 and React 18.2.0 and I'm getting the following error:

react-dom.production.min.js:79 Uncaught TypeError: Cannot read properties of undefined (reading 'svg')
    at Object.Hd [as save] (gsap.min.js:10:53239)
    at gsap.min.js:10:53947
    at Array.forEach (<anonymous>)
    at Kd (gsap.min.js:10:53918)
    at new Draggable (Draggable3.min.js:10:16255)
    at Draggable3.min.js:10:15515
    at Array.map (<anonymous>)
    at Function.create (Draggable3.min.js:10:15492)
    at Context.<anonymous> (pen.js?key=pen.js-18939f83-8a31-62b2-2c73-38edd5336eee:10:17)
    at Cw (gsap.min.js:10:44676)

Am I doing something wrong? 

 

I found this post from 2018 regarding an issue with React 16.5 adding dragClickables:true but this isn't the solution.

 

Cheers!

See the Pen 9bc707f98fe05701e810e90d77f5cb10 by chrisgannon (@chrisgannon) on CodePen

Link to comment
Share on other sites

Hey Chris!

 

It seems that the version of Draggable in your example was the issue:

https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js

 

That's a version from the future (3.11.5) so you need to jump into the Delorian and get back to 3.11.4 and everything seems to work :D

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

 

Happy Tweening!

  • Like 2
Link to comment
Share on other sites

  • Solution

Hey @chrisgannon! It looks like Rodrigo beat me to it. Yeah, you're using the current release of the GSAP core with a pre-release (beta) version of Draggable :)

 

Just use the current release of Draggable and you should be golden. 

Or it would work to use the beta version of the upcoming release of both files (core and Draggable). The beta version of the core is at https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

Just don't mis-match them, that's all. 

  • Like 2
Link to comment
Share on other sites

Quick sanity check - this is the beginnings of a project I'm working on (drag the black dot around the dial). Given React is a big fussy baby when it comes to where code is placed and executed, is this the correct way to do it? (mainly regarding the placement of the onDrag but if you spot any other issues I'm all ears - I want to avoid unnecessary re-renders etc).  

See the Pen 44359a27b9cb436f0fcffba87cecdfca by chrisgannon (@chrisgannon) on CodePen

 

Link to comment
Share on other sites

Hey Chris!

 

In general everything looks OK. I would recommend using GSAP Context for all your GSAP instances, for easier and better cleanup. Also you could use scoped selectors to avoid all the refs and refs callbacks.

 

As for the placement of the onDrag callback, in this particular case it seems to be the best place since the Draggable instance is being created on the same GSAP Context instance so using GSAP Context's add method to later reference the same instance for creating the Draggable seems to over complicate the whole setup.

https://greensock.com/docs/v3/GSAP/gsap.context()

 

React-wise there is no need to create the array for the dots inside the functional component, that could be outside without any issues. Also there is no need for two useLayoutEffect hooks with an empty dependencies array. Just create one and put the code in the order you intend it to run and there shouldn't be any issues.

 

I forked your codepen and added those changes:

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

 

Let us know if there's anything else.

Happy Tweening!

  • Like 2
Link to comment
Share on other sites

Regarding your addition of the class dragDot to the Dot component (and removal of the ref array), would it not now be best to remove the forwardRef as this is functionality no longer used/required and simply declare Dot as a basic component? @Rodrigo

 

E.g. 

function Dot (){
  return <circle className="dragDot" cx="275" cy="379.48" r="10" />;
};

 

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.
×
×
  • Create New...