Looking for an alternative drag-able tree component

marlene · August 1, 2019, 6:10pm

looking for something like this 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!

cpryland · August 1, 2019, 6:25pm

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?

marlene · August 1, 2019, 8:44pm

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)```

kerrishotts · August 1, 2019, 11:33pm

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?

marlene · August 2, 2019, 10:26pm

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

marlene · August 7, 2019, 2:01am

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.

kerrishotts · August 7, 2019, 4:16pm

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

marlene · August 7, 2019, 8:38pm

Im looking forward to it! Thank you!!

marlene · August 7, 2019, 8:40pm

I realized its relying on HTML drag and drop.

Topic		Replies	Views
Material-UI Framework in React plugin? UXP Plugin API react , ui	3	670	December 29, 2020
Can I use npm packages or Node.js APIs? UXP Plugin API faq	4	1813	March 9, 2023
Uxp module failed to resolve in react XD plugin UXP Plugin API react	5	850	November 15, 2019
Xd Plugin using Angular UXP Plugin API javascript	11	4410	September 8, 2020
Going through Quickstart guide to make new plugin but getting Plugin Error on load UXP Plugin API	7	374	August 19, 2021

Looking for an alternative drag-able tree component

Related Topics