Looking for an alternative drag-able tree component

looking for something like this react sortable tree:

https://frontend-collective.github.io/react-sortable-tree/

for my React panel plug in. Currently this in not supported because
Node modules don’t work in XD. I am looking for an alternative. Does anyone know of something similar that works so that I don’t create one from scratch? Thank you!

Welcome!

How do you mean “node modules don’t work in XD”?

Many of us use npm to use and manage node_modules in our plugins.

The real question is whether this particular package uses browser features that aren’t in UXP.

Have you tried using it?

2 Likes

so i had previously asked and this was told the following: " in general, many Node modules won’t work in XD because it’s not Node — many APIs that Node provides are not available in XD, and its dependency loading system is different. see: https://adobexdplatform.com/plugin-docs/reference/javascript/javascript-support.html#can-i-use-npm-packages-or-nodejs-apis

i tried using the module posted in the link from the question I posted, but it is giving the following error:

Loading plugin /Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally
something
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `App`.
    in App
    at error (plugins/PluginLoader.js:1:11491)
    at b.<anonymous> (plugins/PluginLoader.js:1:2459)
    at uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-3.1.0/build/modules_gen/domjs/src/js/domjs_scripts.js:322:893
    at j (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-3.1.0/build/modules_gen/domjs/src/js/domjs_scripts.js:322:785)
    at g (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-3.1.0/build/modules_gen/domjs/src/js/domjs_scripts.js:322:390)
    at f (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-3.1.0/build/modules_gen/domjs/src/js/domjs_scripts.js:322:192)
    at k (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-3.1.0/build/modules_gen/domjs/src/js/domjs_scripts.js:322:1097)
    at b.value (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-3.1.0/build/modules_gen/pluginmanager/src/js/pluginmanager_scripts.js:87:4436)
    at console.<anonymous> (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-3.1.0/build/modules_gen/js/runtime/src/js/runtime_scripts_loader.js:64:1001)
    at warningWithoutStack (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:50066:32)
    at warning (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:50481:27)
    at Object.createElementWithValidation [as createElement] (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:51608:5)
    at App.render (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:54503:13)
    at finishClassComponent (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:28459:31)
    at updateClassComponent (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:28414:24)
    at beginWork (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:29362:16)
    at performUnitOfWork (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:33030:12)
    at workLoop (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:33070:24)
    at renderRoot (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:33153:7)
    at performWorkOnRoot (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:34060:7)
    at performWork (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:33972:7)
    at performSyncWork (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:33946:3)
    at requestWork (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:33815:5)
    at scheduleWork (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:33629:5)
    at scheduleRootUpdate (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:34290:3)
    at updateContainerAtExpirationTime (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:34318:10)
    at updateContainer (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:34375:10)
    at ReactRoot.module.exports../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:34671:3)
    at /Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:34808:14
The above error occurred in the <panel> component:
    in panel (created by App)
    in App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
    at error (plugins/PluginLoader.js:1:11491)
    at b.<anonymous> (plugins/PluginLoader.js:1:2459)
    at uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-3.1.0/build/modules_gen/domjs/src/js/domjs_scripts.js:322:893
    at j (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-3.1.0/build/modules_gen/domjs/src/js/domjs_scripts.js:322:785)
    at g (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-3.1.0/build/modules_gen/domjs/src/js/domjs_scripts.js:322:390)
    at f (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-3.1.0/build/modules_gen/domjs/src/js/domjs_scripts.js:322:192)
    at k (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-3.1.0/build/modules_gen/domjs/src/js/domjs_scripts.js:322:1097)
    at b.value (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-3.1.0/build/modules_gen/pluginmanager/src/js/pluginmanager_scripts.js:87:4436)
    at console.<anonymous> (uxp://uxp-internal/home/ubuntu/jenkins/workspace/Torq/torq-native/release-3.1.0/build/modules_gen/js/runtime/src/js/runtime_scripts_loader.js:64:1034)
    at logCapturedError (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:30835:13)
    at logError (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:30871:5)
    at update.callback (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:31783:5)
    at callCallback (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:30151:12)
    at commitUpdateEffects (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:30190:7)
    at commitUpdateQueue (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:30181:3)
    at commitLifeCycles (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:31101:11)
    at commitAllLifeCycles (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:32454:7)
    at Object.invokeGuardedCallbackImpl (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:13827:10)
    at invokeGuardedCallback (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:14009:31)
    at commitRoot (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:32666:7)
    at /Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:34136:5
    at Object.unstable_runWithPriority (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:53179:12)
    at completeRoot (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:34135:13)
    at performWorkOnRoot (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:34064:9)
    at performWork (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:33972:7)
    at performSyncWork (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:33946:3)
    at requestWork (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:33815:5)
    at scheduleWork (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:33629:5)
    at scheduleRootUpdate (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:34290:3)
/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:34030
    throw error;
    ^
Plugin Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `App`.
    at invariant (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:13808:15)
    at createFiberFromTypeAndProps (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:23956:11)
    at createFiberFromElement (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:23977:15)
    at createChild (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:25743:28)
    at reconcileChildrenArray (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:25994:25)
    at reconcileChildFibers (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:26317:14)
    at reconcileChildren (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:28120:28)
    at updateHostComponent (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:28581:3)
    at beginWork (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:29367:14)
    at performUnitOfWork (/Users/marlene/Library/Application Support/Adobe/Adobe XD/develop/ally/main.js:33030:12)```

So, the native module resolution is different in XD, but when using a bundler like webpack or parcel, the module resolution is the same as Node (because the resolution occurs at bundle time, not load time). So if you’re using a webpack config, that shouldn’t be an issue here.

However, if it is relying on the HTML5 Drag and Drop specification, it won’t work in the current version of XD. (We are working on that for a release soon, though.)

This particular error doesn’t tell me a whole lot, but it’s possible that you’re importing or requiring something and it isn’t being resolved correctly. Do you have example code (or actual code, if you’re OK with sharing) that generates this issue?

Also, just so I know – what version of XD and React are you using?

I am just calling the component in the render function and it throws that error. the code sample i am using is the link to the github that i originally posted. The XD version: 21.1 and React version is: 16.8

I just checked and it is relying on the HTML5 Drag and Drop specification… Is there an approximate date when this will be able to work on XD? just curious.

1 Like

We’re aiming for an XD 22 release for drag and drop support.

Im looking forward to it! Thank you!! :smile:

I realized its relying on HTML drag and drop.