React-dnd - Not sure how to get drag and drop to fire for nested components of the same type

I'm trying to build a react nested list component that is fully draggable with react-dnd. I have a menu component which contains item components, and each item can also contain other item...

React DnD - "Cannot have two HTML5 backends at the same time."

I am trying to make a POC with Rails5, action Cable, React and Rails and React DnD. The purpose is to make an app like trello but for an recruitment process. My front is in ReactJS. I have 3...

Why (and How Can I FIx) ESLint import/no-extraneous-dependencies Failures on Installed Packages?

When I run ESLint I get the following errors: 1:13 error 'joi' should be listed in the project's dependencies. Run 'npm i -S joi' to add it import/no-extraneous-dependencies 2:16 error ...

Why isn't opacity and list reordering working with react-dnd and react-virtualization?

I'm trying to set up a react-dnd sortable list inside a react-virtualized List. The example I'm working from with react-dnd is...

Adding the DragDropContext gives me an error about exporting the ES6 module

So I started to integrate the react dnd library into my application, and the first thing I tried to do is add the DragDropContext with the Html5 backend. When I add the attribute to the class I...

How to integrate react DnD with react fullcalendar?

I have the following simple demo for a drag and drop component using React DnD plugin. Card.js (DropSource) import React, { Component } from 'react'; import { DragSource } from...

Syntax error - Support for the experimental syntax 'decorators-legacy' isn't currently enabled

I'm trying to build JS react project with decorators. My .babelrc looks like this: { "presets": [ "@babel/preset-env", "@babel/preset-react", ], "plugins": [ ...

heroku node deployment(react-boilerplate) sh: 1: node-pre-gyp: not found error

I'm getting error when deploying react-boilerplate on heroku with feathers, nodejs, mongodb, react. I specified up to date versions in package.json, and tried building with both npm and yarn but...

npm install says cannot find file

I am cloning a repo and get the following error when running npm install ENOENT:no such file or directory, rename...

Why callback function in react-dnd useDrop hook can't update parent component state?

dnd Hook Api, and want to call parent component callback function to update state in useDrop drop function, however I can only update the parent state from init state. Here is an example, no...

Clojure + Clojurescript app on Heroku: dependencies of npm packages not getting installed when deploying app

I am writing a web application with the backend in Clojure and the frontend in Clojurescript with React and Reagent. I am trying to host it on Heroku. When I run lein ubjerar locally, it builds...

'react-dnd' does not contain an export named 'DragDropContext'

I tried to use react dnd in my react web application. I create a js file call withDnDContext.js. When I compile it, I received an error 'react-dnd' does not contain an export named...

What babel plugin should I use for correct work of react-dnd?

I wanna use react-dnd in my project. But I have an error: vm.js:83 Uncaught /my-project-path/node_modules/react-dnd-html5-backend/dist/esm/index.js:1 (function (exports, require, module,...

Getting Object(...) is not a function on my drag and drop context. I'm using React

Using react-big-scheduler for my app and it require drag and drop context. So when I import and set it up I get Object(...) is not a function I have also tried using as a react component in the...

Ng serve throwing @angular/core/core has no exported member 'eeFactoryDef'

Im getting like 50 errors that all say that angular/core/core has no exported member 'eeFactoryDef'. They come from different node_modules, for example angular/cdk, ng-bootstrap, ngx-pipes,...

Corrupted Javascript bundle in Production but running fine in Development mode

I've a React app with node server and I had perfectly fine production bundle a few days ago but recently my production bundle is corrupted. However my dev bundle is working perfectly fine. Can...

State not updating on Drag and Drop Formik Component

I'm working on a family tree where children can be moved to other parents. Issue comes when I reorder a family on drag and drop(DnD), it doesn't update in the formik values object. Also when I...

react-dnd sortable list using custom drag layer

I've created a simple sortable list with react-dnd using code similar to react-dnd's sortable example found here in codesandbox. However, I'm having some difficulties trying to to conceptualize...

Loading state + second SSR rendering pass causing a client-side rendering glitch

I'm using material-ui with SSR. I've set up the SSR machinery on my app according to the instructions on the material-ui docs. It does work, but not without a rendering issue that so far has been...

(React) Button click not working with Beautiful DnD

I'm using Beautiful-DnD for a project where if certain items are dragged and dropped into different columns, with a button click, it will reroute the user to a different page. I am having trouble...

Make component draggable using react-dnd

I'm trying to drag a component using react-dnd I would try to make like this example but only dragging for the moment. In my app on top of all component I import react-dnd-html5-backend and wrap...

Noob question: How can I turn my create-react-app into a standalone offline video game .exe program that does not require anything else to run?

I'm making a video game with create-react-app and typescript. I've tried distributing with electron but it is such a mess and I'm totally lost. I've put so much effort on this game that I really...

how to configure service worker in react project ( npx create-react-app)?

I'm creating a pwa with reactJS but I can't get google lighthouse to recognize it as such. I created the project with npx create-react-app and these are the configuration files to get the service...

Does ReactTags work with React 16.12 applications?

I wanted to use ReactTags with my React 16.12 application following the instructions here -- https://www.npmjs.com/package/react-tag-input . I installed react-dnd 11.1.1 . Below is my...

Drag and Select images and then change order by dragging using reactjs

I am developing a front end application using react hooks where I need to upload one/multiple images. Then i need to implement two features on the uploaded images (shown as bootstrap...

How solve this error: Error: Rendered more hooks than during the previous render?

Can I solve this problem with hooks? And why it is not working right? I start to use REACT DND and after I try to use drag and drop on the project everything went wrong. I use as...

How to resolve 'react-dnd-html5-backend' does not contain a default export?

I'm new to React and trying to emulate the Row Drag & Drop code found here: https://react-table-omega.vercel.app/docs/examples/row-dnd If I open the sandbox, all the default code works fine. If I...

Create controlled input with drag&drop in react

I am trying to create a component to upload a single image, show its preview and delete option. Also, it is important for me to be able to upload from the backend base64 encoded URL into field...

Minimal react-dnd hooks example breaks on "Expected drag drop context"

I constructed a minimal example of the react-dnd hooks API in practice and it runs into a runtime error: import { useDrag, useDrop, DndProvider } from "react-dnd"; import { HTML5Backend } from...

Getting error while using useDrag({}) method in react typescript with react-dnd

import { useEffect } from 'react'; import { useDrag, useDrop } from 'react-dnd'; import { getEmptyImage } from 'react-dnd-html5-backend'; import { useAppState } from '../AppStateContext'; import {...