Cursor講座 第8章8.4節「Cursorでエラー修正＆再デプロイ！GitHubとVercelを使った復旧手順」

エラー内容をCursorのAI機能で修正する

「react-beautiful-dnd」がreactのバージョン19に非対応なので、「hello-pangea/dnd」に変更することをAI機能へプロンプトで伝えて対応してもらいます。

a対応後は画面中央の「Accept」をクリックして修正コードを反映させます。そのあと「npm install」を「Run」ボタンで実行してください。

「@hello-panea/did」も対応していないと表示されました。AIはこのようにミスすることもあるので注意が必要ですね。

代わりに「@dnd-kit/core」というライブラリライブラリは再利用可能なソフトウェアの部品です。であれば利用できるようなので、こちらで実行するようプロンプトで伝えます。

処理が完了したら「Accept」ボタンをクリックしてください。

すると複数のファイルでエラーが発生しました。このような場合は、エラー部分をドラッグし、上部に表示される「Add to Chat」をクリックしましょう。

するとエラー部分の情報がチャット欄へ参照情報として追加されます。複数追加できるので、全てのエラー内容を追加したあと「参照したポイントがエラーになっています。」というプロンプトを実行します。

エラー部分が解消したあとに「npm install」を実行してください。

最後に「npm start」を実行してアプリを起動します。

上記のようにWebアプリが起動し、動作に問題が見られなければ修正完了です。