jaredLunde / jaredLunde/masonic

"WeakMap key undefined must be an object" on deleting an item from the collection

Open
#169 1 comment 1 reaction 0 assignees View on GitHub
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.
![image](https://github.com/user-attachments/assets/018068c1-85e2-4af2-a7f5-781e6f818511)

2.
![image](https://github.com/user-attachments/assets/491c72c7-7c03-4db3-a269-2434f3207c76)

**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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.