React Konva VS dnd-kit

I'm currently using konva (& react-konva) package, to utilize it in Node.js enviroment I also need canvas package installed in. However, when running the code encountering this error:

Links I found googling (https://github.com/konvajs/react-konva/issues/588, https://stackoverflow.com/questions/53139884/next-js-disable-server-side-rendering-on-some-pages) hint that I should turn off SSR, but it does not seem to work for me as doing what this (https://stackoverflow.com/a/64509306/153399) solution suggests does nothing for me and even though my app looks like this now:

This is a known issue for Konva: https://github.com/konvajs/react-konva/issues/188

if you want to create draggable/droppable elements on your website one of the options available is Dnd-kit which is a modern drag-and-drop toolkit for React. Using it is fairly very easy, unless you end up on youtube where for some reason every one wants to make kanban boards with it and suddenly instead of learning how to use Dnd-kit now you are also dealing with the added complexity of a kanban board. So, I am just going to do a very simple and straightforward setup for Dnd-kit just going over how to use it and what we are doing.

dnd-kit is a modern, lightweight toolkit for building drag-and-drop experiences in React. This library takes a unique approach because it doesn’t give you a pre-built DnD system—it's a framework you can use to build your own. This means you get full control over the DnD behavior, styling, and interactions, without being boxed into a rigid API. That flexibility is exactly why we decided to use it for Puck.

Note that currently dnd-kit is undergoing a rewrite with the new release planned in January 2025.

dnd-kit for drag-and-drop functionality

Despite its widespread use, implementing drag-and-drop can be challenging—especially when building custom interfaces that need to handle complex interactions. That’s where dnd-kit, a powerful and developer-friendly open-source library, comes in.

5. @dnd-kit for Drag and Drop: Lightweight, Modular, and Accessible

When starting out I had researched on a couple of libraries such as React-beautiful-Dnd, React Dnd-kit and React Swappy.

dndkit seemed very promising, until I realized the state of development [0], and critical performance issues if you want to use it for larger lists (individual issues linked within [0]). So it's fine if you need to use it for simple scenarios and a smaller number of items, but otherwise, it's inadequate in current state, unfortunately...The fact that the post was in Aug 2023, perf. issues still remain and there's low activity on issues in general, doesn't bode well...

[0] - https://github.com/clauderic/dnd-kit/issues/1194

Link: https://dndkit.com/

dnd-kit is one of the newest ones, it is modern, light-weight, and performant.