Invariant failed: Cannot find droppable entry with id [...]

[simodroussi]

Expected behavior

Item is draggabale. I used pretty much the same code as in the tutorials.

Actual behavior

Item is not draggable

Steps to reproduce

Check repo: https://github.com/simodroussi/todo-genie-ts-react

What version of React are you using?

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

"@types/react-beautiful-dnd": "^13.1.2", "@types/react-dom": "^18.0.1", "react": "^18.0.0", "react-beautiful-dnd": "^13.1.0",

What browser are you using?

Chrome is up to date Version 100.0.4896.127 (Official Build) (64-bit)

Demo

Video demo of issue

[benjaminpeto]

I'm having the same issue at the moment. I believe it has something to do with react 18.

Error message:

react-beautiful-dnd - Invariant failed: Cannot find droppable entry with id [dropppable-0]

Actual behaviour

Item is not draggable and droppable. Stays in place. After going back to the code editor and rename the id(as string), in the browser it starts working and I can drag and drop flawlessly. However, after refreshing the browser, the same problem happens again. Just like the video @simodroussi have shared.

What version I'm running?

  "@types/react": "^18.0.8",
    "@types/react-beautiful-dnd": "^13.1.2",
    "@types/react-dom": "^18.0.3",
    "react": "^18.1.0",
    "react-beautiful-dnd": "^13.1.0",
    "react-dom": "^18.1.0",

What browser?

Chrome - Version 101.0.4951.54 (Official Build) (x86_64) Firefox - Version 97.0.1 & Version 99.0.1 (64bit) Safari - Version 15.4 (17613.1.17.1.13)

[einarq]

Saw mentioned in another issue that it might be related to Strict Mode, so it probably originates from the fact that React now runs useEffect twice when within Strict Mode (in dev only).

[innovative-engineering]

I'm getting the same issue with react 18 in development environment. It works properly in production.

[benjaminpeto]

My solution was to downgrade to react17 if you can. Not the best, but for a personal project was fine.

[Syeda-Mehwish]

Remove </React.StrictMode> tag from Index.tsx file . It works for me.

[praiseisaac]

Write Droppable tag , DragDropContext tag and Draggable tag under </React.StrictMode>. It works for me.

This solved the issue for me. Thank you @Syeda-Mehwish

[froxx93]

What if I want to keep strict mode enabled?

[benjaminpeto]

@froxx93 go with react v17

[hacktronics]

Downgrading project to v17 or removing project wide configuration is not an option, is there any way I can use this library.

[jeononesco]

What if I want to keep strict mode enabled?

Also encountering this now. Im studying reactJS. May i ask what is the importance of strict mode ?

[cryptoroland]

On Sat, Aug 13, 2565 BE at 6:49 PM, jeononesco @.***> wrote:

What if I want to keep strict mode enabled?

Also encountering this now. Im studying reactJS. May i ask what is the importance of strict mode ?

— Reply to this email directly, view it on GitHub https://github.com/atlassian/react-beautiful-dnd/issues/2396#issuecomment-1214247742, or unsubscribe https://github.com/notifications/unsubscribe-auth/A2D3RL64BP73CY2JSBIRDCDVZAX7TANCNFSM5T6HXPDA . You are receiving this because you are subscribed to this thread.Message ID: @.***>

-- Sent from my iPhone

[froxx93]

@jeononesco Strict mode is a development helper to make you aware of bad code. You can read about it in the react docs: https://reactjs.org/docs/strict-mode.html#identifying-unsafe-lifecycles

[okkjoo]

There are problems in the development environment. But there are no problems in production. It's just because

Strict mode checking runs only in development mode; They do not affect the production build. -- React-StrictMode

I think the specific reason why it went wrong：

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions: Detecting unexpected side effects

Anyway, for individual projects, I choose to comment them out

//index.tsx
root.render(
    // <React.StrictMode>
    <App />
    // </React.StrictMode>
);

good running

[Kitketovsky]

Unfortunately, I cannot find the author of this solution, but somewhere on Stack Overflow I found this one - this is a hook, which disables double checking of React.StrictMode for particular thing that will be connected with enabled state.

import { useEffect, useState } from 'react';

export const useStrictDroppable = (loading: boolean) => {
  const [enabled, setEnabled] = useState(false);

  useEffect(() => {
    let animation: any;

    if (!loading) {
      animation = requestAnimationFrame(() => setEnabled(true));
    }

    return () => {
      cancelAnimationFrame(animation);
      setEnabled(false);
    };
  }, [loading]);

  return [enabled];
};

How to use:

const [enabled] = useStrictDroppable(isYourDataLoading);
...
{enabled && <Droppable droppableId={'id}> ... </Droppable>}

[beachstrider]

Remove </React.StrictMode> tag from Index.tsx file . It works for me.

Thank you, @Syeda-Mehwish

[KirtiSingh19]

Remove </React.StrictMode> tag from Index.tsx file . It works for me.

Thank you, @Syeda-Mehwish

[valentimcanejo]

I'm using NextJS with react-beautiful-dnd and I'm facing the same problem, I already put my reactStrictMode to false in next.config, but it keeps returning this thread's error on build, can someone help me?

This error is showing:

RbdInvariant { message: 'Invariant failed' }

[somesh2001]

Expected behavior

Item is draggabale. I used pretty much the same code as in the tutorials.

Actual behavior

Item is not draggable

Steps to reproduce

Check repo: https://github.com/simodroussi/todo-genie-ts-react

What version of React are you using?

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

"@types/react-beautiful-dnd": "^13.1.2", "@types/react-dom": "^18.0.1", "react": "^18.0.0", "react-beautiful-dnd": "^13.1.0",

What browser are you using?

Chrome is up to date Version 100.0.4896.127 (Official Build) (64-bit)

Demo

Video demo of issue

Please Run -> npm install some of the dependencies were not installed so, after running the npm install the issue was resolved

[icon2341]

I will remove strict mode, for now, any idea if this will be fixed?

[icon2341]

ATTENTION EVERYONE: Per #2350 Atlassian does not seem to be supporting this repo any more. There is another repo available that is identical (just change the name) that is a working alternative so that you do NOT have to disable React.Strictmode (see 2350 for details)

[Abhishek1350]

It's working fine after removing React.StrictMode

[masouda1997]

You must not to use strict mode

[Sebascrab]

Remove </React.StrictMode> tag from Index.tsx file . It works for me.

This worked for me too!

[mariosantosdev]

https://github.com/atlassian/react-beautiful-dnd/issues/2399#issuecomment-1175638194 It's works with StrictMode

[slax57]

I used @hello-pangea/dnd to solve this issue and it works just fine out of the box. Instructions are really straightforward.

[MaryRichelle]

removing strict mode solve this issue but Dave Gray provide the solution of this issue here https://youtu.be/HeNVPF_fRXI?t=1135 while using strict mode

[talha410900]

Use below component for Droppable even if you don't want to remove the strict mode

import { useEffect, useState } from "react";
import { Droppable, DroppableProps } from "react-beautiful-dnd";
export const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
  const [enabled, setEnabled] = useState(false);
  useEffect(() => {
    const animation = requestAnimationFrame(() => setEnabled(true));
    return () => {
      cancelAnimationFrame(animation);
      setEnabled(false);
    };
  }, []);
  if (!enabled) {
    return null;
  }
  return <Droppable {...props}>{children}</Droppable>;
};

[rashil-gopee]

Use below component for Droppable even if you don't want to remove the strict mode

import { useEffect, useState } from "react";
import { Droppable, DroppableProps } from "react-beautiful-dnd";
export const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
  const [enabled, setEnabled] = useState(false);
  useEffect(() => {
    const animation = requestAnimationFrame(() => setEnabled(true));
    return () => {
      cancelAnimationFrame(animation);
      setEnabled(false);
    };
  }, []);
  if (!enabled) {
    return null;
  }
  return <Droppable {...props}>{children}</Droppable>;
};

@talha410900 Thanks! That worked for me!

[orpic]

I'm using NextJS with react-beautiful-dnd and I'm facing the same problem, I already put my reactStrictMode to false in next.config, but it keeps returning this thread's error on build, can someone help me?

This error is showing:

RbdInvariant { message: 'Invariant failed' }

this worked for me, thanks!

[djibril6]

I had the same issue and the following works for me on React 18 and without disabling Strict mode:

const MyComponent = () => {
  // set an initial value for the droppableId
  // can be anything 
  const [droppableId, setDroppableId] = useState('hello');

  useEffect(() => {
    // change the id later here based on some conditions
    // in my case when my data is loaded
    if (todoList.length) {
      setDroppableId('todos');
    }
  }, [todoList.length]);

  ....
 <Droppable droppableId={droppableId}>...</Droppable>
}

[mustafaskyer]

I had the same issue and the following works for me on React 18 and without disabling Strict mode:

const MyComponent = () => {
  // set an initial value for the droppableId
  // can be anything 
  const [droppableId, setDroppableId] = useState('hello');

  useEffect(() => {
    // change the id later here based on some conditions
    // in my case when my data is loaded
    if (todoList.length) {
      setDroppableId('todos');
    }
  }, [todoList.length]);

  ....
 <Droppable droppableId={droppableId}>...</Droppable>
}

This works for me. thanks @djibril6

[lokeshkrishna2003]

Remove </React.StrictMode> tag from Index.tsx file . It works for me.

issues was fixed , thaks for the info

[abay777]

I will remove strict mode, for now, any idea if this will be fixed?

i tried removing but it didn't worked but when i commented it it goes away

[Felix-Asante]

Unfortunately, I cannot find the author of this solution, but somewhere on Stack Overflow I found this one - this is a hook, which disables double checking of React.StrictMode for particular thing that will be connected with enabled state.

import { useEffect, useState } from 'react';

export const useStrictDroppable = (loading: boolean) => {
  const [enabled, setEnabled] = useState(false);

  useEffect(() => {
    let animation: any;

    if (!loading) {
      animation = requestAnimationFrame(() => setEnabled(true));
    }

    return () => {
      cancelAnimationFrame(animation);
      setEnabled(false);
    };
  }, [loading]);

  return [enabled];
};

How to use:

const [enabled] = useStrictDroppable(isYourDataLoading);
...
{enabled && <Droppable droppableId={'id}> ... </Droppable>}

it worked, thanks

[JTtime]

with Droppable, mention type='group' to solve this problem

<Droppable droppableId={"droppable"} type="group"> {provided=>( )} </Droppable>

[hussain-nz]

with Droppable, mention type='group' to solve this problem

<Droppable droppableId={"droppable"} type="group"> {provided=>( )} </Droppable>

~Great! Less code, better fix :)~ Fix I quoted doesn't work, only on HMR/hot reload.

I ended up switching to the package @hello-pangea/dnd

[Arifimran7]

ya i am also remove the mode now the code run done

[maelfosso]

I had the same issue and the following works for me on React 18 and without disabling Strict mode:

const MyComponent = () => {
  // set an initial value for the droppableId
  // can be anything 
  const [droppableId, setDroppableId] = useState('hello');

  useEffect(() => {
    // change the id later here based on some conditions
    // in my case when my data is loaded
    if (todoList.length) {
      setDroppableId('todos');
    }
  }, [todoList.length]);

  ....
 <Droppable droppableId={droppableId}>...</Droppable>
}

That works for me

[2048920439]

Remove </React.StrictMode> tag from Index.tsx file . It works for me.

Thank you very much！

[nvbkdw]

I used this the forked version https://github.com/hello-pangea/dnd/tree/main to solve the problem