jaredLunde / jaredLunde/masonic
"WeakMap key undefined must be an object" on deleting an item from the collection
- Dominant language
- TypeScript
- Stars
- 1.4k
- Forks
- 63
- PR merge metrics
- No merged PRs in 30d
Description
**Describe the bug**
I have a collection of items which I pass into `Masonry`. When I delete an item, recreate the collection, and thus rerender the component holding the `Masonry`, I get "WeakMap key undefined must be an object".
**To Reproduce**
1. Go to the appropriate route/component (loader loads the items, Masonry loads successfully)
2. Click on the delete button of the item (asynchronously, item is POST-ed to the relevant route, which reruns the loader, returning a new collection)
3. The error appears
**Expected behavior**
The component should render successfully.
**Screenshots**
1.

2.

**Desktop (please complete the following information):**
- OS: Windows
- Browser Firefox / Chrome
- Version Firefox 130.0 / 128.0.6613.138
**Smartphone (please complete the following information):**
(not tested)
**Additional context**
(May or may not be relevant.) The collection is retrieved by a React Router Ioader into the component via the [`useLoaderData` hook](https://reactrouter.com/en/main/hooks/use-loader-data); i.e. not some internal state.
I delete the item using an async function; POST-ing to the React Route of the component and thus triggering the loader to run again, and the component to re-render.
Stack trace:
```
TypeError: WeakMap key undefined must be an object
s2 index.js:58
memoize index.js:85
useMasonry use-masonry.js:108
range use-positioner.js:177
search interval-tree.js:353
range use-positioner.js:177
useMasonry use-masonry.js:84
MasonryScroller masonry-scroller.js:21
React 9
workLoop scheduler.development.js:266
flushWork scheduler.development.js:239
performWorkUntilDeadline scheduler.development.js:533
js scheduler.development.js:571
js scheduler.development.js:633
__require chunk-5WRI5ZAA.js:8
js index.js:6
__require chunk-5WRI5ZAA.js:8
React 2
__require chunk-5WRI5ZAA.js:8
js React
__require chunk-5WRI5ZAA.js:8
js React
__require chunk-5WRI5ZAA.js:8
react-dom_client.js:38
```
Contributor guide
Research direction
Start with the stack-trace entry points in use-masonry.js, use-positioner.js, masonry-scroller.js, and interval-tree.js, then reproduce the loader-driven deletion and rerender described in the issue. Trace the undefined value reaching the memoize call and verify that deleting an item and receiving a new collection renders successfully without the WeakMap error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100