TypeError: Cannot read property 'className' of undefined

[fabio-felizzi]

trafficstars

React version - 17.0.2 Draggable version - 4.4.4

<Draggable
        axis="x"
        handle=".handle"
        defaultPosition={{ x: 0, y: 0 }}
        bounds={{ left: '-100vw', right: 0 }}
        position={0}
        onDrag={handleDrag}
      >
        <div>
          <section>
            {children}
          </section>
          <button className="handle">test</button>
        </div>

in the above snippet I am getting the console error noted in the title. I have tried with the handle prop as well as nodeRef but either way I got the same error.

the error is at the top of my call stack here

Draggable.render
file:///Users/{user}/Documents/Repos/ssr-prototype/node_modules/react-draggable/build/cjs/Draggable.js (288:58)

I've used draggable in an old react 16 project and it worked perfectly. is there something I'm missing?

[hasheemismath]

Facing the same problem. Any update on this issue?

[hymRedemption]

Same problem here, I checked the source code. The following method will solve the issue

<Draggable
        axis="x"
        handle=".handle"
        defaultPosition={{ x: 0, y: 0 }}
        bounds={{ left: '-100vw', right: 0 }}
        position={0}
        onDrag={handleDrag}
        children={(<div>
          <section>
            {children}
          </section>
          <button className="handle">test</button>
        </div>)}
      >        

it seems that you should use the children attributes. Not sure why should do like this

[vesaademi]

Try this: <Draggable><div>all your content</div></Draggable>. This worked for me!