Drag source is not rendering at all

[pie6k]

Describe the bug
Component decorated with DragSource is not rendered at all (render function is not called)

To Reproduce
Write such component:

import * as React from "react";
import styled from "styled-components";
import {
  DragSource,
  DragSourceConnector,
  DragSourceMonitor,
  ConnectDragSource
} from "react-dnd";

const ImageHolder = styled.div`
  margin: 10px;
  max-width: 200px;
  width: 200px;
  min-height: 100px;
  position: relative;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
`;

const ImageNameHolder = styled.div`
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 13px;
`;

interface Props {
  imagePath: string;
  connectDragSource?: ConnectDragSource;
  isDragging?: boolean;
}

@DragSource<Props>(
  "image",
  {
    beginDrag: (props: Props) => props.imagePath
  },
  (connect: DragSourceConnector, monitor: DragSourceMonitor) => ({
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  })
)
export class PhotosBrowserPhoto extends React.Component<Props> {
  render() {
    const { imagePath, connectDragSource } = this.props;
    console.log({ connectDragSource });
    return connectDragSource(
      <div>drag me</div>
    );
  }
}

Expected behavior
Draggable component with drag me text, connectDragSource printed in the console

Actual behavior
Nothing is rendered at all, console is empty

[mvincent7891]

Same thing is happening to me, though I'm using ES6 syntax:

import React, { Component } from "react";
import { DragSource } from "react-dnd";
import PropTypes from "prop-types";

import "./Dictionary.css";

const propTypes = {
  entry: PropTypes.object.isRequired,

  // Injected by React DnD:
  isDragging: PropTypes.bool.isRequired,
  connectDragSource: PropTypes.func.isRequired
};

const TYPES = {
  ROW: "row"
};

/**
 * Implements the drag source contract.
 */
const rowSource = {
  beginDrag(props) {
    console.log(props);
    return {
      entry: props.entry
    };
  }
};

/**
 * Specifies the props to inject into your component.
 */
function collect(connect, monitor) {
  return {
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  };
}

class Row extends Component {
  constructor(props) {
    console.log("here");
    super(props);
    this.state = {
      entry: props.entry
    };
  }

  static getDerivedStateFromProps = (props, state) => {
    return {
      entry: props.entry
    };
  };

  render() {
    const { isDragging, connectDragSource } = this.props;
    const { entry } = this.state;

    console.log("dragging:", isDragging);
    return connectDragSource(
      <div style={{ opacity: isDragging ? 0.5 : 1 }} className="row">
        <div>{entry.string}</div>
        <div>{entry.kMandarin}</div>
        <div>{entry.kDefinition}</div>
      </div>
    );
  }
}

Row.propTypes = propTypes;

export default DragSource(TYPES.ROW, rowSource, collect)(Row);

Using:

    "react-dnd-html5-backend": "^5.0.1",
    "react-dom": "^16.5.1",

Expected: see rendered component and console logs
Actual: nothing is rendered; nothing is logged

[pie6k]

Adding provider component in root of my app solved the issue.

I think however - it should be clearly noted in example code that it's needed - I thought seeing example is enough to understand how to start using library

[jeppester]

I think the problem is this if-statement:

react-dnd/packages/react-dnd/src/decorateHandler.tsx

Line 210 in 934efc8

if (dragDropManager === undefined) {

It looks like it disables a check that would otherwise throw an error if there's no context.

[theoutlander]

I had to add the provider as shown below:

import HTML5Backend from 'react-dnd-html5-backend'
import { DragDropContextProvider } from "react-dnd";

<DragDropContextProvider backend={HTML5Backend}>
 <App/>
</DragDropContextProvider>

[danielberndt]

fyi: I just encountered the issue when using Portals and fixed it by replacing the outdated ReactDOM.unstable_renderSubtreeIntoContainer API with ReactDOM.createPortal.

[archiewx]

Why didn't I spend a lot of time for troubleshooting rendering reason, found the answer here, please do your sample some seriously, thank you

[wldcordeiro]

Seems to be present against React 16.8.1, my manager is never created and the Context.Consumer inside the DragSource never renders any children.

[kylebebak]

This isn't anywhere in the Quick Start section of the docs.

This is practically the first thing that ought to be in the docs...

[sballesteros]

Same issue here but only under certain production builds (i made sure that the DragDropContextProvider was present in my tree). I noticed that when using the react dev tools the DragDropContextProvider is lost and appears as Unknown in the component tree (see screenshot)

Downgrading from v7.3.2 to

• "react-dnd": "7.1.0",
• "react-dnd-html5-backend": "7.1.0"

fixes it for me.

[pokotyan]

I also encountered the same bug.
Displayed in development but not in production.

It is my environment.

• "react-dnd"： "7.1.0"、
• "react-dnd-html5-backend"： "7.1.0"

const render = () => {
  ReactDOM.render(
    <DragDropContextProvider backend={HTML5Backend}>
      <Provider store={store}>
        <ConnectedRouter history={history}>
          <AppContainer>
            <App />
          </AppContainer>
        </ConnectedRouter>
      </Provider>
    </DragDropContextProvider>,
    document.getElementById('app')
  );
};

DragDropContextProvider is Unknown

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[sballesteros]

Anyone knows if that has been solved before it gets automatically closed ?

[devcastoro]

How I have solved
In my case, all worked fine in dev, but completely broken in production.

The problem was originated by the useDrag import path...

Not working import
import {useDrag} from "react-dnd/lib/index";

Working import
import {useDrag} from "react-dnd";

That said, I really don't know how the first import was originated.

Also, I can safely say that you don't need to import the DndProvider in the app root. I've done that before to found that the problem was originated by the import, but after the import "fix", I've restored the DndProvider in one of the components instead of the app root (for a cleaner code) and that's works fine.

Context:

• "react": "^16.8.3",
• "react-dnd": "^9.0.1",
• "react-dnd-html5-backend": "^9.0.0",

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[aminnoura]

any solution yet? nothing suggested in this topic helped.

"react-dnd": "^11.1.3",
"react-dnd-html5-backend": "^11.1.3",

everything works fine only when I change the state position, I can't see the render while I can see the changes in console logs.