Reactバージョン18でreact-beautiful-dndが使えない問題を解決する
はじめに
react-beautiful-dnd はドラッグアンドドロップが簡単に実装できる便利なライブラリです。
ですが React バージョン 18 以降にはサポートされていません。
そこでサポートされているバージョン 16 や 17 にして実装するのも良いのですが、
バージョン 18 でも実装できる方法を調査しましたのでここに記載していきたいと思います。
追記
現在(2023/8/6)ではこちらのIssueでReactバージョン18でもインストールできるようです。コメント頂きありがとうございます。
それでもインストールできない場合のみ以下を読み進めてください。
React バージョン 18 以降ではインストールできない
React バージョン 18 準備
create-react-app して React を準備します。
完了後、pacjage.json 見ると React バージョン 18.0.2 がインストールされています。
react-beautiful-dnd をインストール
ここで以下のコマンドで react-beautiful-dnd をインストールしてみます。
$ npm install react-beautiful-dnd
するとこのような感じでエラーになってしまいます。
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: プロジェクト名@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR! react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.5 || ^17.0.0" from react-beautiful-dnd@13.1.0
npm ERR! node_modules/react-beautiful-dnd
npm ERR! react-beautiful-dnd@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/ユーザー名/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/ユーザー名/.npm/_logs/2022-07-27T13_46_41_808Z-debug-0.log
エラー内容を見ると、react-beautiful-dnd の最新バージョン 13.1.0 は
React バージョン 16.8.5 から 17.0.0 に対応しているとのこと。
解決方法
インストール
React のバージョンを 17 まで落とせばインストールできますが、
せっかくなら Reactバージョン 18 で開発したい、ということでさらにエラー内容をみてみます。
依存関係の競合を修正する場合は、実行したコマンドに--forceもしくは--legacy-peer-depsつけて再実行してね、
と記載があるので以下のコマンドに修正して再実行してみます。
$ npm install react-beautiful-dnd --legacy-peer-deps
これでエラーなくコマンドが完了できたのでpackage.jsonを確認します。
さらにコード修正も必要
ここまででインストールできましたのでドラッグアンドドロップできるか確認します。
react-beautiful-dnd を使用したリストをテスト的に作成してみます。
export const TestList = [
{
id: "01",
name: "みかん",
},
{
id: "02",
name: "りんご",
},
{
id: "03",
name: "ぶどう",
},
{
id: "04",
name: "メロン",
},
];
import { useState } from "react";
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
import { TestList } from "./TestList";
import "./App.css";
function App() {
const [testList, setTestList] = useState(TestList);
const onDragEndTest = (result) => {
const items = [...testList];
const deleteItem = items.splice(result.source.index, 1);
items.splice(result.destination.index, 0, deleteItem[0]);
setTestList(items);
};
return (
<div className="App">
<h1>ドラッグアンドドロップ</h1>
<DragDropContext onDragEnd={onDragEndTest}>
<Droppable droppableId="droppableId">
{(provided) => (
<div
className="testListArea"
{...provided.droppableProps}
ref={provided.innerRef}
>
{testList.map(({ id, name }, index) => {
return (
<Draggable key={id} draggableId={id} index={index}>
{(provided) => (
<div
className="testItem"
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<div>
{id}：{name}
</div>
</div>
)}
</Draggable>
);
})}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
</div>
);
}
export default App;
react-beautiful-dndの書き方はこちらを参考にさせて頂きました。
これでブラウザでドラッグアンドドロップしてみようとすると
文字列が選択されるだけでドラッグアンドドロップすることができません。
この問題を解決するために色々調査してみると、
ReactがStrictModeで動いていることが原因のようです。
StrictModeについてはこちらを参照ください[React ドキュメント]
ということで、index.js の<React.StrictMode>を削除して修正してみます。
修正前
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
修正後
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />
);
修正後ブラウザでドラッグアンドドロップしてみると
無事ドラッグアンドドロップすることができました。
まとめ
react-beautiful-dnd を React バージョン 18 で使えないものかと考えていたところ
まとまっているサイトがなかったので色々調査した結果を今回この記事にしてみました。
同じような悩みを持っている方の参考になれば嬉しいです。
参考サイト
Discussion
2023.3.1現在、react-v18 環境でのインストールは可能なようです。
下記のIssueもご確認ください。