TypeError: manager.getActions is not a function with latest react-dnd version (9.3.2 at time of writing)

[chuckdries]

Reproduction: https://codesandbox.io/s/react-dnd-example-11-ow923

Potentially related to the removal of DragDropContext (replaced by DndProvider)

[LouisBrunner]

@chuckdries Thanks for the report, I will take a look as soon as possible!

[LouisBrunner]

Just to keep you up to date, I am preparing a new version (probably 4.0.0) on the next branch that will fix this issue by supporting the new >= 9.0.0 react-dnd API.

However react-dnd non-esm builds are completely broken (wrong entry point, wrong imports...) so it will have to wait until that is fixed. In the meantime, I will update 3.x.x to forbid usage of newer react-dnd.

[vkuba]

Hasn't import been fixed in the https://github.com/react-dnd/react-dnd/releases/tag/v9.3.3 :)
Thanks for the update and your great work, keep it going!

[LouisBrunner]

@vkuba This issue also needs to be solved react-dnd/react-dnd#1468

[san4oz]

@LouisBrunner, how's it going ? :)

[LouisBrunner]

@san4oz I have been continuing work on the next branch, and I believe it is more or less ready. However I can't seem to get the tests to pass as I am running into a React error linked to Hooks:

Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
    1. You might have mismatching versions of React and the renderer (such as React DOM)
    2. You might be breaking the Rules of Hooks
    3. You might have more than one copy of React in the same app
    See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

I can't seem to pinpoint the problem, so if any of you would like to take a look and contribute a fix or just advise on a course of action, that would be great!

[woodreamz]

Did you found the error? In general, this error is pretty clear. I read the code in next branch, I do not see any invalid hook call. Is it possible you have two versions of React installed?

[dobesv]

Maybe don't use hooks for now?

[babalugats76]

Thanks Louis for all your hard work! I just hit the TypeError: manager.getActions is not a function myself. Looks like, to move forward, I will have to roll back my react-dnd version. I cannot understand why your awesomeness is not included as part of the react-dnd library. Do people really make applications that target HTML5 or Touch?! I am probably preaching to the choir, but still...I have been dealing with this convert mouse/touch stuff nonsense for years and your library just works!

Would you happen to know the maximum release--of all related packages--one should use that still supports the awesome MultiBackend whilst still including DragDropContext, etc. Can you advise on specific versions that we can use until the new stuff is ready? This is what I am going with for now:

After rolling back:

I think this will be good information for all the fans to know! All the best and many thanks for your relentless toil!

[LouisBrunner]

@babalugats76 Thank you for the really high praise! :)

From what I can see, 8.0.3 seems to be the last supported for the react-dnd family (react-dnd, dnd-core, react-dnd-html5-backend) and 0.8.3 the last for react-dnd-touch-backend, you should be good to go!

I just pushed a new version under the next tag which should be working with 9.x.x (and which doesn't use Hooks, as I seem to be struggling with them), tell me if everything works on your end!

[babalugats76]

Thanks Louis! I did try to "next" the module and update all of the dependencies via npm (I am using create-react-app):

./node_modules/react-dnd-preview/lib/index.js Module not found: Can't resolve 'react-dnd-cjs' in 'C:\Users\James Colestock\Documents\Quizdini-2.0\learn\client\node_modules\react-dnd-preview\lib

I believe this is related to 1468? Not quite sure how to work around this :/

[LouisBrunner]

The next branch is currently using the CommonJS version of react-dnd, thus you will need to use react-dnd-cjs, dnd-core-cjs, react-dnd-html5-backend-cjs and react-dnd-touch-backend-cjs in your dependencies for now (see peerDependencies of react-dnd-multi-backend and react-dnd-preview).

[babalugats76]

Thank you so much. I did give it a shot.

Here are my modules:

+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
-- [email protected]

Here are my imports:

import { DndProvider } from 'react-dnd';
import MultiBackend, { TouchTransition } from 'react-dnd-multi-backend';
import HTML5Backend from 'react-dnd-html5-backend';
import TouchBackend from 'react-dnd-touch-backend';

Here is my custom pipeline:

const CustomHTML5toTouch = {
  backends: [
    {
      backend: HTML5Backend
    },
    {
      backend: TouchBackend({ enableMouseEvents: true }), // Note that you can call your backends with options
      preview: false,
      transition: TouchTransition
    }
  ]
};

In my render, I am using the DndProvider like so:

<DndProvider backend={MultiBackend(CustomHTML5toTouch)}>
...
</DndProvider>

Unfortunately, I am still getting the TypeError:

Knowing me, this is probably user error :) I am using the custom pipeline in order to set preview: false because I am using a custom DragLayer. Is there anything glaringly obvious that I am missing? Thanks again for the help and great module...

[LouisBrunner]

I completely forgot to link that, my bad: https://github.com/LouisBrunner/dnd-multi-backend/tree/next/packages/react-dnd-multi-backend#migrating-from-3xx

react-dnd 9.x.x introduces DnDProvider which creates the backend and provides arguments (context, manager and extra args), thus the previous syntax of calling TouchBackend with arguments and passing it to react-dnd doesn't work anymore.

You will have to transform your pipeline from

...
    {
      backend: TouchBackend({ enableMouseEvents: true }), // Note that you can call your backends with options
      preview: false,
      transition: TouchTransition
    }
...

to

...
    {
      backend: TouchBackend,
      options: {enableMouseEvents: true}, // Note that you can call your backends with options
      preview: false,
      transition: TouchTransition
    }
...

[babalugats76]

Boom!

Thank you; I appreciate that. The additional migration note is helpful and clear!

Adjusted custom pipeline to:

const CustomHTML5toTouch = {
  backends: [
    {
      backend: HTML5Backend
    },
    {
      backend: TouchBackend,
      options: { enableMouseEvents: true }, // Note that you can call your backends with options
      preview: false,
      transition: TouchTransition
    }
  ]
};

Adjusted DndProvider to:

<DndProvider backend={MultiBackend} options={CustomHTML5toTouch}>
...
</DndProvider>

All preliminary tests are passing, but I will keep at it.

Many thanks!

[afoures]

Hi,

EDIT: nevermind that was some npm bug, I just restarted it and it works perfectly.

I had the same problem, so I installed all the dependencies :

    "dnd-core-cjs": "^9.4.0",
    "node-sass": "^4.12.0",
    "react": "^16.8.6",
    "react-dnd": "^9.4.0",
    "react-dnd-cjs": "^9.4.0",
    "react-dnd-html5-backend": "^9.4.0",
    "react-dnd-html5-backend-cjs": "^9.4.0",
    "react-dnd-multi-backend": "^4.0.0-0",
    "react-dnd-touch-backend": "^9.4.0",
    "react-dnd-touch-backend-cjs": "^9.4.0",
    "react-dom": "^16.8.6",
    "react-redux": "^7.1.1",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1",
    "redux": "^4.0.4",
    "redux-thunk": "^2.3.0",
    "tmp": "^0.1.0"

used the same import and custom pipeline as above but with preview: true and the same DndProvider.

Then this error appeared :

Error: You must specify at least one Backend, if you are coming from 2.x.x (or don't understand this error)
        see this guide: https://github.com/louisbrunner/dnd-multi-backend/tree/master/packages/react-dnd-multi-backend#migrating-from-2xx

Could you help me understand why ?
Thank you

[LouisBrunner]

As it seems like this issue is now fixed by 4.0.0-0, I will publish it on latest as 4.0.0, thanks to all of you for your patience!

[babalugats76]

Awesome! So just for clarification's sake, do we still need all the CommonJS stuff? Are there still plans in the works apropos that? Thanks again for all the hard work.

[LouisBrunner]

@babalugats76 v4 will work with CommonJS
I will be tracking effort to use ESM in #34