Encountering a reference type error when using drag and drop with NextJS and react-dnd

When using react-dnd version 16 with TypeScript in Next.js, the refs within the return array of the useDrag and useDrop hooks are not compatible with LegacyRef. Interestingly, other platforms like Vite.Js handle this type assignment correctly.

The same code works on both platforms, but Next.js throws a type error.

const [{ isDragging }, dragRef] = useDrag(() => ({
    ...
}));

<div ref={dragRef}>
    ....
</div>

Even attempting to cast it does not solve the issue. How can I resolve this type error?

Error: Type 'ConnectDragSource' is not assignable to type 'LegacyRef | undefined'.

typescriptnext.jsreact-dnd

Answer №1

After using useDrag, I discovered that it provides a function that returns a React Element. This method worked successfully for me:

const [{ isDragging }, drag] = useDrag(...);

{drag(
  <div>
      ....
  </div>
)}

If you desire to make your entire component draggable, simply:

return drag(
  <div>...</div>
)

You can apply the same technique for 

const [{ isDragging }, drop] = useDrop(...)

It's important to mention that this strategy isn't officially documented in the API, and there may be implications to consider. However, I haven't encountered any issues thus far.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible for me to add a string to a URL as long as the string is not null?

When retrieving data from a database, I have the option to include specific parts for a more targeted search. Let's say I have an object structured like this: { title: "wonderland", aliases: "", ... } My goal now is to generate a URL for the ...

angularstringtypescripturlget

RTK Query - executing a query upon mounting with lazy loading enabled

Should rerendering be triggered by sending a request on mount? Or is the use of useEffect necessary? (Is lazy mode different from regular queries?) export const Catalog: React.FC<CatalogProps> = ({ object, category }) => { const [getCatalogPro ...

reactjstypescriptredux-toolkitrtk-query

Since switching to macOS Ventura (13.0), I've noticed that both Next.js and any npx command have been freezing consistently

Recently, I encountered an issue with the command in my Next.js project after upgrading to macOS 13. When trying to run npm run dev, the following output got stuck for a very long time: > dev > next dev Subsequently, when attempting to create a new ...

npmwebnext.jsoh-my-zshnpx

Using sl-vue-tree with vue-cli3.1 on internet explorer 11

Hello, I am a Japanese individual and my proficiency in English is lacking, so please bear with me. Currently, I am using vue-cli3.1 and I am looking to incorporate the sl-vue-tree module into my project for compatibility with ie11. The documentation menti ...

javascripttypescriptvue.jsecmascript-6babel-polyfill

What is the reason behind having to refresh the page or switch to another tab for the field to display?

Currently, I am in the final stages of completing my update form. However, I am facing an issue with the conditional field. The select field should display a conditional field based on the selected value. The problem I'm encountering is that I need to ...

reactjstypescriptnext.jsreact-hook-formzod

Listening for Internet Connection in Ionic and Angular

Currently, I am working on implementing a listener in my Ionic app that can detect changes in network activity and respond accordingly. import { Component } from '@angular/core'; import { Network } from '@capacitor/network'; @Component ...

angulartypescriptionic-frameworkcapacitor

Having trouble with Next Auth v5 not redirecting after logging in?

Currently implementing a credentials provider with token rotation using a custom backend for authentication in my upcoming application Here is the code snippet from my auth.ts file: async function refreshToken( token: JWT, { refreshToken, expi ...

next.jsnext.js13next-auth

Retrieve the object property based on an array of indices

I am looking to create a function that can retrieve a specific property of an object based on an array of property names const getObjectProperty = (arr: string[], object: any) { // This function should return the desired object property } Expected Outco ...

javascriptarraysjsontypescriptobject

Monitor a universal function category

Trying to implement a TypeScript function that takes a single-argument function and returns a modified version of it with the argument wrapped in an object. However, struggling to keep track of the original function's generics: // ts v4.5.5 t ...

typescripttypescript-typingstypescript-generics

`How can TypeScript scripts be incorporated with Electron?`

As I work on my simple electron app, I am facing an issue where I need to include a script using the following code: <script src="build/script.js"></script> In my project, I have a script.ts file that compiles to the build folder. im ...

typescriptelectron

Struggling to grasp how to implement Redux and React-router together in one component

I have recently embarked on learning TypeScript and encountered a confusing behavior. Upon encountering this error: Type 'ComponentClass<{}>' is not assignable to type 'StatelessComponent<void | RouteComponentProps<any>> ...

reactjstypescriptreact-router-redux

"Exploring the New Feature of Angular 17: Named Router Outlets Implemented

One issue I am facing with my application is the rendering of different pages based on whether a user is logged in or not. The generic pages like the landing or logout page should be displayed within the primary router-outlet when the user is not logged in ...

angulartypescriptroutesangular17

Contrast the different characteristics of string dynamic arrays in Angular 6

I am working with two arrays of strings. One array is a dynamic list of checkboxes and the other is the source to check if the item exists in the first array. I need to implement this dynamically using Angular 6, can you help me with this? Currently, the ...

arraysangulartypescriptcheckbox

I'm looking for a way to create a Redux thunk action creator that will return a promise. How

In my code, I have a primary thunk that is triggered by a button click. Within this thunk, I need to invoke another thunk and ensure it completes before proceeding. The second thunk returns a promise. Below is an excerpt of the code in question: export f ...

javascripttypescriptpromiseredux-thunk

Unpacking the information in React

My goal is to destructure coinsData so I can access the id globally and iterate through the data elsewhere. However, I am facing an issue with TypeScript on exporting CoinProvider: Type '({ children }: { children?: ReactNode; }) => void' is no ...

javascriptreactjstypescript

Seamless menu display and collapse with a smooth transition

I'm interested in creating a smooth transition using tailwincss for the 'active' state change when showing or collapsing the menu. Although I attempted to add it during the state change by including transition delay-150 duration-300 ease-in ...

reactjssassnext.jscss-transitionstailwind-css

What is the best way to obtain an error as an object when subscribing to an HTTP GET request

I am working on an asp.net core webApi along with an Angular9 WebApp. My goal is to retrieve the error in a subscribe as an object rather than just a string. this.http.post<TestSystem>(this.url, testsystem).subscribe((result) => { // do someth ...

angulartypescript

Does the React memo function modify the component's prop type?

I've come across a strange issue where defining two components causes compilation errors when written separately but not when written in the same file. test3.tsx import React from "react"; type ValueType = number[] | string[] | number | st ...

reactjstypescriptintellij-ideanext.jstypescript-generics

Verification based on conditions for Angular reactive forms

I am currently learning Angular and working on creating a reactive form. Within my HTML table, I have generated controls by looping through the data. I am looking to add validation based on the following cases: Upon page load, the Save button should be ...

angulartypescriptangular-reactive-forms

Utilizing React with Typescript to create JSX text translation files

My task involves translating text stored in a file... ///translations.txt const TEXT: { [x: string]: { [y: string]: string } } = { en: { joinNow: <React.Fragment>Join <b>Now<b/></React.Fragment>, signUp: <React.Fragmen ...

reactjstypescript