React-Beautiful-DnD: Invariant failed: provided.innerRef has not been provided with a HTMLElement

Question

I was following the tutorial but I unexpectedly got this error, does anyone see what is going on?

Here is the full error:

react_devtools_backend.js:2557 react-beautiful-dnd: A setup problem was encountered. > Invariant failed: provided.innerRef has not been provided with a HTMLElement. You can find a guide on using the innerRef callback functions at:https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/using-inner-ref.md

Droppable Code:

render() {
        const { column, clients } = this.props;
        return (
            <Container>
                <Title>{column.name}</Title>
                <Droppable droppableId={column.id}>
                    {(provided) => (
                        <TaskList
                            innerRef={provided.innerRef}
                            {...provided.droppableProps}
                        >
                            {clients.map((client, idx) => (
                                <Task
                                    key={client.id}
                                    client={client}
                                    index={idx}
                                />
                            ))}
                            {provided.placeholder}
                        </TaskList>
                    )}
                </Droppable>
            </Container>
        );
    }

Draggable Code:

    render() {
        const { client, index } = this.props;
        return (
            <Draggable draggableId={client.id} index={index}>
                {(provided) => (
                    <Container
                        innerRef={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                    >
                        {client.name}
                    </Container>
                )}
            </Draggable>
        );
    }

Thank you!!!

Answer 1

I had this same issue. This is because the styled-components library has changed how it handles ref/innerRef. See their documentation: https://styled-components.com/docs/advanced#refs which states: "Using an older version of styled-components (below 4.0.0) or of React? Use the innerRef prop instead."

The tutorial uses v3.2.6, check the package.json here: https://codesandbox.io/embed/github/eggheadio-projects/react-beautiful-dnd-task-app/tree/lesson-3/?hidenavigation=1

So to fix the error, when using the latest version of style-components (5.3.0), change: innerRef={provided.innerRef} to ref={provided.innerRef}.

Answer 2

Wrap your component in a div and use the attributes on the div.

<Droppable droppableId={column.id}>
  {(provided) => (
    <div innerRef={provided.innerRef} {...provided.droppableProps}>
      <TaskList>
        {clients.map((client, idx) => (
          <Task key={client.id} client={client} index={idx} />
        ))}
        {provided.placeholder}
      </TaskList>
    </div>
  )}
</Droppable>;

For more information on this go to this link react-beautiful-dnd github

Note: if you are using styled-components v4 the innerRef prop was replaced with just ref.