Error: <DraggableCore> not mounted on DragStart! when trying to use in NextJS

[nikshepsvn]

'use client'

import React, { useRef, useState } from 'react';
import { Rnd } from 'react-rnd';

const Box = ({ ref }: { ref: React.ForwardedRef<HTMLDivElement> }) => (
    <div
      ref={ref}
      className="box"
      style={{ margin: 0, height: '100%', paddingBottom: '40px' }}
    >
      <article className="media">
        <div className="media-left">
          <figure className="image is-64x64">
            <img src="https://avatars1.githubusercontent.com/u/10220449?v=3&s=460" draggable="false" alt="github avatar" />
          </figure>
        </div>
        <div className="media-content">
          <div className="content">
            <p>
              <strong>bokuweb</strong> <small>@bokuweb17</small> <small>31m</small>
              <br />
              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Aenean efficitur sit amet massa fringilla egestas.
              Nullam condimentum luctus turpis.
            </p>
          </div>
          <nav className="level is-mobile">
            <div className="level-left">
              <a className="level-item">
                <span className="icon is-small"><i className="fa fa-reply" /></span>
              </a>
              <a className="level-item">
                <span className="icon is-small"><i className="fa fa-retweet" /></span>
              </a>
              <a className="level-item">
                <span className="icon is-small"><i className="fa fa-heart" /></span>
              </a>
            </div>
          </nav>
        </div>
      </article>
    </div>
);

const CustomCanvas = React.forwardRef((props, ref) => {
  return (
    <Rnd
      default={{
        x: 150,
        y: 205,
        width: 500,
        height: 190,
      }}
      minWidth={500}
      minHeight={190}
      bounds="window"
      nodeRef={ref as React.ForwardedRef<HTMLDivElement>}
    >
      <Box ref={ref as React.ForwardedRef<HTMLDivElement>}/>
    </Rnd>
  );
});

export default CustomCanvas;

I'm currently seeing the above error when using NextJS and react-rnd, anything I'm missing? Latest version of the library and on Chrome

[jmurty]

We’re seeing the same problem. For us react-rnd works well with Next version 14.1.3 but dragging no longer works as of versions 14.2+, also including unfortunately the brand new Next v15 release candidate.

I spent some time debugging this a couple of weeks ago and this is what I think is happening, from memory.

A callback ref function is passed from react-rnd via nodeRef through the re-resizable library and eventually assigned to the <Draggable> component.

However, for some reason, in recent Next.js and/or React that callback ref function is never invoked, so the ref from draggable doesn’t get passed back up through the hierarchy to where it is needed.

I don’t know why the behaviour of the callback ref has changed or broken, and I haven’t found any mention of this being a deliberate or expected change in latest React.

[jmurty]

I have found that fairly minimal and related code changes to both react-rnd and re-resizable fix this problem for me when using Next.js 14.2.3. I've submitted pull requests which will hopefully be acceptable and keep this great library working for us as Next keeps chugging along and breaking stuff.

[bokuweb]

@jmurty @nikshepsvn 10.4.11 published. could you please try it?

[jmurty]

Thanks very much for the quick merges @bokuweb!

I can confirm that the latest version 10.4.11 of react-rnd fixes dragging for me with Next.js 14.2.3