Invariant failed: provided.innerRef has not been provided with a HTMLElement.

[joshmillgate]

Building a Chrome extension using React trying to implement the most basic setup with dnd but running into this issue, tried multiple times with minimum requirements no luck.

Tried both 'innerRef={}' and 'ref={}'

Using this as a boilerplate: https://github.com/lxieyang/chrome-extension-boilerplate-react

Update Got this working using v10...

Are you new to rbd?

First time using, followed guides and same results

Expected behavior

Drop and drag to work normally

Actual behavior

Getting error: "Invariant failed: provided.innerRef has not been provided with a HTMLElement."

Steps to reproduce

import React from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

const Newtab = () => {
  const test = [{
    title: 'test 1',
    index: 1,
    key: 1
  }, {
    title: 'test 2',
    index: 2,
    key: 2
  }, {
    title: 'test 3',
    index: 3,
    key: 3
  }]

return (
     <DragDropContext>
          <div>
            <h1>test</h1>
            <Droppable droppableId="test">
              {(provided) => {
                <ul {...provided.droppableProps} ref={provided.innerRef}>
                  {test.map((testItem) => {
                    return (
                    <Draggable draggableId={testItem.key} key={testItem.key} index={testItem.index}>
                      {(provided) => {
                        <li {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} >{testItem.title}</li>
                      }}
                    </Draggable>
                    )
                  })}
                </ul>
              }}
              </Droppable>
         </div>
   </DragDropContext>
  );
};

export default Newtab;

Suggested solution?

No

What version of React are you using?

^17.0.1

What version of react-beautiful-dnd are you running?

v13, same issue with v12

What browser are you using?

Chrome

[AdreanOHalloran]

I'm running into the same issue with almost identical code setup. I was trying to pass the dnd props to a child component with no success. I brought all the stuff into one component to test, and I'm having the same problems as Josh.

I'm also using React 17.0.1. V13 Dnd and Chrome.

[Forfires]

the lambda expression should have a return value, you should use return <li></li> in the {}
you can change
{(provided) => { <li {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} >{testItem.title}</li> }}
to
{(provided) => <li {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} >{testItem.title}</li> }
same to
{(provided) => { <ul {...provided.droppableProps} ref={provided.innerRef}> blabla
it will be right

[2stash]

@joshmillgate @Adrean1983 Can you post your repos?

ref worked for me. innerRef did not work for me.

Also if you implemented @Forfires fix, then you have an issue somewhere else. If you are just returning JSX then you do not need { } and do not have to have the JSX enclosed if it is on one line, or you can wrap it in ( ) if it is multiple lines. If you use { } you have to include "return".

This would work
{(provided) => {return <li {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} >{testItem.title}</li> }}

[danieldelcore]

Hey @joshmillgate, it looks like the provided variables are both named the same way for both draggable and droppable and that ambiguity seems to be the cause of the issue. In this case provided may no longer contain innerRef because it has been reassigned or the scope has changed.

Please try the following:

     <DragDropContext>
          <div>
            <h1>test</h1>
            <Droppable droppableId="test">
-              {(provided) => {
+              {(providedDroppable) => {
-                <ul {...provided.droppableProps} ref={provided.innerRef}>
+                <ul {...providedDroppable.droppableProps} ref={providedDroppable.innerRef}>
                  {test.map((testItem) => {
                    return (
                    <Draggable draggableId={testItem.key} key={testItem.key} index={testItem.index}>
-                      {(provided) => {
+                      {(providedDraggable) => {
                        <li {...providedDraggable.draggableProps} {...providedDraggable.dragHandleProps} ref={providedDraggable.innerRef} >{testItem.title}</li>
                      }}
                    </Draggable>
                    )
                  })}
                </ul>
              }}
              </Droppable>
         </div>
   </DragDropContext>

I've tripped over this a couple of times myself haha 😅, please give it a try and let me know 🙏

[danieldelcore]

Will close for now, please reopen if you're still having issues

[issdilshod]

@joshmillgate @Adrean1983 Can you post your repos?

ref worked for me. innerRef did not work for me.

Also if you implemented @Forfires fix, then you have an issue somewhere else. If you are just returning JSX then you do not need { } and do not have to have the JSX enclosed if it is on one line, or you can wrap it in ( ) if it is multiple lines. If you use { } you have to include "return".

This would work {(provided) => {return <li {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} >{testItem.title}</li> }}

thats works, thank you so much!