Error when trying to add new DnDComponent while running: Uncaught TypeError: h2 is undefined #605
Comments
|
Adding an element dynamically after registration is not going to work because the new element won't be configured correctly in the store. So when you are adding a new one it registers as a new container (new branch) instead of adding it to its siblings. That's why it has a wrong index. You can debug it on the console How do you add the new element in the runtime? The ideal situation is to React.useEffect(() => {
if (taskRef.current) {
store.register({ id });
}
return () => {
store.unregister(id);
};
}, [taskRef.current]); |
|
Thanks Jalal! I'm using the default code from this example. In particular, this is already here: React.useEffect(() => {
if (dndCompRef.current) {
store.register({ id, depth, readonly });
}
return () => {
store.unregister(id);
};
}, [dndCompRef.current]);What do need to unregister when? I tried (on adding a new element) dismounting all element's DnDComponent, waiting 500ms for good measure, so everything is cleaned up, and then remounting all components (including the dynamically added one). Same error message, I think I am missing something here. |
|
If the container has |
|
How do I unregister the entire branch? I saw that I can do And yes, the keys that I use for the map part are unique, I just displayed them next to each item for double-checking. |
|
Unregister the components will automatically update the branch React.useEffect(() => {
return () => {
// Does this actually work?
// maybe add a console message to check it.
store.unregister(id);
const value = store.getSerializedElm(id)
console.log(value) // value should be null.
};
}, [dndCompRef]); |
|
Just tried that and I didn't see something else than |
|
I'll try to debug it locally on my end and see if it's a bug or not. |
Very thankful for your time Jalal, I'm here on standby, let me know if I can help somehow. |
|
#608 Should fix this issue. |
Thanks Jalal, I noticed two issues:
The first line ( |
|
Is this code similar to this one: https://github.com/dflex-js/dflex/blob/main/packages/dflex-dnd-playground/src/components/stream/ContinuouslyUpdatingTodo.tsx It's important to have a unique key for react that doesn't depend on the array index. |
|
Yes, just tried reducing my example to a minimum: {items.map((item, index) => (
<DnDComponent Component="div" key={item.id} registerInput={{id: item.id}}>
<div>
blub
</div>
</DnDComponent>
))}the DnDComponent is 99% from your example in the docs. The |
|
If the key is the same in each iteration then react won't remove elements with identical keys. Wich means partial updating of the DOM. To enforce a total removal of elements from tree you should tell React by providing new keys so the entire children would be unmount/mount. const items = [{id: 0}, {id: 1}, {id: 2}]
const newItems = [{id: 0}, {id: 1}, {id: 2}, {id: 3}]Then react will keep elements What we need is a total removal: const items = [{id: 0}, {id: 1}, {id: 2}]
const newItems = [{id: 00}, {id: 01}, {id: 02}, {id: 03}]Then react will insert entire new brand children. |
|
So to stream in a new element, we have to make all sibling elements unregister first. Got it. I got success by unmounting all elements for a short timeout so that all of them are getting remounted at once. Seems to work now. But still, why can't I make it reconcile? I have the commit option set to |
|
@jalal246 do you have any idea? It's almost working, just the commit won't work |
|
I'll look into it. But if it's not working then it should throw an error. Also, it seems your process.env is not set. Setting it to development might help with error messages and debugging. |
|
What do you mean process.env? Do you mean NODE_ENV? As this is a frontend package you can't just expect it to be run inside process.env.NODE_ENV environment :/ I can't set process.env for an app that gets executed only inside the browser. Yes, you can hack something together in React, but not so easy in Remix for example. I'll try to create a temporary workaround just for logging, but I think you should be careful with this |
|
|
The env variables are not in the frontend of Remix, they are only existent in the backend. Your package is run on the client where process.env is not defined (the browser doesn't know about process.env). But the argument is not about how I get it there, there probably are some hacky ways. The issue is that NODE_ENV is not something you can count on in the frontend (in general, not just for Remix). Having said this, of course this is an open source project, and I am not paying for dflex. If you tell me this issue is not your priority at the moment and you are not going to spend time looking into why the reconciliation broke from 3.7.1 to 3.8.0 that's okay too, I'll just use up/down arrows for now then. I was just wondering because it worked fine before and I saw some commits regarding the |
|
Your app run through bundler. To help you debug your code DFlex provides a production version and a development version. The same goes for React as well. Otherwise, you won't be able to get error messages because it's a production version. I'll suggest reading the documentation posted above again. To debug and find the issue it would be helpful to produce the bug. Same for #604. |
|
Also, I am working on a better approach to deal with elements registered/unregistered but I am not sure when I am going to finish and merge. Hopefully soon. |
As I said, Remix doesn't expose Envs to the frontend, especially not directly as I don't think I can make
As for this, the issue with adding the new element to the store is resolved. As you said, I had to unmount and remount every sibling. Now that works. Just the commiting doesn't work, it's just behaving as if I'd disabled commit after ending drag. Not even the |
It won't if it's a production bundle that's the point of shipping two bundles. |
Hmm well, that's difficult then. I don't think we can solve this with remix as process.env is not available in the frontend. |
|
@xdivby0 if this issue is not fixed by the current release feel free to reopen it. |
Everything works as long as all the elements are initialized from the beginning.
As soon as I add an element on runtime via javascript (and then also successfully register in the store), the next mousedown event logs this obsfuscated error and doesn't allow any drag and drop operations (not the old elements and also not the new ones).
The logged, obfuscated error:
I used the example code that has this nice DnDComponent for React. I also found out the line in the component that's triggering the error:
I also noticed that the JavaScript-added element doesn't follow the data-index count of the other elements, but starts from 0 again (each additional javascript-added element then counts up 1, 2, 3 from there on again).
If I do
The logged container looks normal, same as before I dynamically add an element at runtime (where everything still worked). So the store does indeed contain this newly added element. Also when I add an element via javascript and then save and reload the page, everything works again, until I add another element.
What may I have forgotten to do? Unfortunately, my whole code is way too long, but the core part is mapping a list with each element mapping to a DnDComponent. As soon as I add one item to that list via JavaScript, it seems to mess up something.
I tried to read as much as possible in the codebase about how the
new DnDconstructor is, but nothing jumped my eye.The text was updated successfully, but these errors were encountered: