TypeError: Cannot read property 'getBoundingClientRect' of undefined

[kumardennis]

<Container style={{ height: "500px" }}> <Section style={{ background: "#d3d3d3" }} minSize={100} /> <Bar size={10} style={{ background: "#888888", cursor: "col-resize" }} /> <Section style={{ background: "#d3d3d3" }} minSize={100} /> </Container> copied the code from the example, still getting error.

[tiagomnferreira-zz]

Having exactly the same problem, waiting for an answer

[Arif-un]

I got this error after enabling React.StrictMode

[dombo3]

Same issue for me.

[Gibbo3771]

I am currently in the process of fixing this on my fork since the maintainer seems to be...gone.

Not quite sure what is going on yet, inside the Container component childrenProps array contains duplicate items (exactly two of everything) and since this is supposed to map 1-1 with childrenInstance array, we end up with every second array element being undefined.

You can see the log output below. createID is only called 3x which is correct.

I will investigate and see if I can figure out why this is happening.

[domogami]

I am having the same issue and I think it does have to do with React.StrictMode

[viveleroi]

The problem is that the author is pushing section/bar props into a private array (childrenProps) held in Container.tsx and then relying on the length as a unique ID for each section/bar.

In normal mode, this "works" and generates IDs like 0, 1, 2, 3, etc. That's not a great solution especially when you want react to be "deterministic" and always produce the same result.

Furthermore, the author is relying on one-to-one mapping of an array index to these IDs. So there's a loop: this.childrenProps.forEach((childProps, index) => { const element = this.childrenInstance[index]; - this is making an assumption that there will always be an ID for the corresponding index and that it relates to the element mapping the author setup.

This all fails because React.StrictMode calls life cycle methods twice, meaning the items pushed onto the array are duplicating. This causes IDs to generate as 1, 3, 5, 7. That breaks the internal mapping and causes the 'getBoundingClientRect' of undefined error.

It looks to me like this repo is dead so I don't expect any fixes with this. But if anyone wants to take a shot, this can save you some debugging. I would imagine it'd be better for components to generate their own ID. Sadly the IDs are used all over the library for array sizes and indexes so this isn't a small change.

I will need a good resizer lib in the coming months, though and may do my own. I like the features with this but am not sure about some of the execution and the requirement of rxjs.

[runjuu]

@viveleroi Excellent explanation!

Hi, I am the original author of this library. Unfortunately I left LeetCode a few years ago and now I don't have access to this repository, so I have to make a Fork for further maintenance.

Try running the code in your local environment and see if there are any problems. I will continue to improve it over the next few weeks, so feel free to give me any feedback!

By the way, RxJS is not really necessary and I will replace it with a lighter solution in a later update.

[viveleroi]

Excellent news! Thanks. Since this issue was reported two years ago and had no author comments I assumed this was fully dead.

Dropping rxjs would probably be best because while it's a great library, it's overkill for this and best not to add large dependencies. Oddly enough I want to use rxjs myself in our application but sometimes I struggle to think of real use cases.

Once you can publish your fork to NPM somewhere I'll try it in our actual prototype app and let you know. Our current app is in AngularJS and I had to write the resizer lib myself so I'm looking forward to not doing that when we redo it in react! Appreciate your effort.

[runjuu]

Phew, almost done! After removing the redundant dependencies, the overall size was reduced from 28.9 kB to 4.3 kB 🎉 . Also, a new documentation site is under construction, come and have a look 😆!