Object dies when passed as a prop and updated in the tree

[aripekkako]

Short description

We're getting "This object has died and is no longer part of a state tree." error when passing a mobx-state-tree object as a prop and merging the map containing the products with a map (literal object) that has an object with the same key. We call merge() for the map where the object (product) is stored in an action (self.products.merge({ ...})).

Full error

Error: [mobx-state-tree] This object has died and is no longer part of a state tree. It cannot be used anymore. The object (of type 'ProductCollectionPropertyElement') used to live at '/productStore/products/149900/collection/column/elements/0'. It is possible to access the last snapshot of this object using 'getSnapshot', or to create a fresh copy using 'clone'. If you want to remove an object from the tree without killing it, use 'detach' instead.

Code causing the issue

The error is thrown in the line with const status = productCollection.getRowStatus( below.

  getVisibleRowElements = () => {
    const { productCollection } = this.props;
    return productCollection.row.elements.reduce(
      (elementsWithAvailability, element) => {
        const status = productCollection.getRowStatus(
          this.state.activeColumnElement.id,
          element.id
        );
        if (status.exists) {
          elementsWithAvailability.push({
            element: element,
            available: status.available
          });
        }
        return elementsWithAvailability;
      },
      []
    );
  };

What have we tried?

• Disabling React Dev Tools (as suggested here Async process has "race condition"-like behaviour. #416 (comment)).
• Updating mobx-state-tree to the latest version (1.3.1).
• Using clone and detach(clone()) for the object.

    getVisibleRowElements = () => {
    const { productCollection } = this.props;
    const clonedProductCollection = detach(clone(productCollection));
    return clonedProductCollection.row.elements.reduce(
      (elementsWithAvailability, element) => {
        const status = clonedProductCollection.getRowStatus(
          this.state.activeColumnElement.id,
          element.id
        );
        if (status.exists) {
          elementsWithAvailability.push({
            element: element,
            available: status.available
          });
        }
        return elementsWithAvailability;
      },
      []
    );
  };

[aripekkako]

If there is any additional information I can provide to resolve this issue, I'm more than glad to provide it.

[lishine]

#683 related

[mweststrate]

@aripekkako if you could introduce a minimal reproduction that would be great!

I did find and PR a fix for a bug in map reconcilation today, related to either using numbers as identifier, or using the .put method. See #693. It might be related, but I cannot be entirely sure about that without a test that I can add to the test suite :)

[aripekkako]

#693 shipped in v 1.4.0 fixed this issue in our app. Thank you @mweststrate for the awesome work as always.

Blessings.