프론트에서 드래그 라이브러리로 아마 대부분 react-beautiful-dnd를 사용하고 있었을것이다.
나또한그랬다.
그런데 어느순간부터 Unable to find draggable with id: x 의 문구가 뜨기 시작했다.
검색해보니 dnd 라이브러리에서 자주 일어나는 문제였다.
구글에 해결방법을 검색해보면 모두 strick mode 를 false로 돌려라 라는말만할텐데 아니었다..!
아마 내 블로그까지 왔으면 이미 해볼거 다해본사람이기 떄문에 본론만 말하겠다.
원인
"Unable to find draggable with id" 오류는 일반적으로 react-dnd와 같은 드래그 앤 드롭 라이브러리에서 드래그 가능한 요소의 ID가 일치하지 않거나, 해당 요소가 드래그 가능한 상태로 제대로 등록되지 않았을 때 발생한다.
체크할사항
1. draggable 요소에 id가 설정되어있는지 확인한다.
<Draggable
draggableId={item.id} // 아이디가 있는지 확인!
index={index}
key={item.id}
>
{(provided) => (
...
)}
</Draggable>2. strick mode가 false로 되어있는지 확인한다.
솔직히 이부분은 내 입장에서 똑같다고 생각했다.. 뭐가 달라진진 모르겠는데 구글링하면 많은 검색결과에서 strick mode 를 false로 돌리면 해결된다~ 라고 하니 일단 해본다.
next.config 파일에서 strick mode 를 false로 돌려봤다.
await import('./src/env.js');
/** @type {import("next").NextConfig} */
const config = {
reactStrictMode: false, // <-----------------추가
webpack: (config) => {
config.module.rules.push({
test: /\.svg$/,
use: ['@svgr/webpack'],
});
return config;
},
images: {
remotePatterns: [],
},
};
export default config;
아마 이렇게했을떄 마찬가지로 안되었을거다
해결방법 : @hello-pangea/dnd 로 변경
찾아보니 react-beautiful-dnd 는 리액트 18버전부터는 지원하지않는다!
그래서 해결방법으로 다른 라이브러리를 찾다보니 이름만 변경된거같은 라이브러리를 발견했다. @hello-pangea/dnd
npm i @hello-pangea/dnd 로 설치해준다음 import된 부분만 해당 라이브러리로 바꿔주면 바로작동된다 ㄷㄷ;;
import {
DragDropContext,
Draggable,
Droppable,
DropResult,
} from '@hello-pangea/dnd'; <--from뒤에 import 된 라이브러리명만 변경 react18버전이상으로 새로나온건지, 아니면 해당 라이브러리 제작자가 새 이름으로 다시 판건지는 모르겠지만, 기존 dnd와 똑같이 작동하는거로 봐선 후자가 아닐까 싶었다.
