Error when adding a section to the page

FYI:

    $inputs = $component->getComponentSource()->clientModelToInput($component_instance_uuid, $component, $client_model, $violations);
    // Don't complain about invalid received values except to developers.
    // @see https://en.wikipedia.org/wiki/Robustness_principle
    assert($violations->count() === 0);

IOW: end users won't see this. Hence tentatively decreasing priority. Do you agree?

It seems that this happens even when assertions are disabled. The error in this case is:

Symfony\Component\HttpKernel\Exception\BadRequestHttpException: in Symfony\Component\HttpKernel\Exception\HttpException::fromStatusCode() (line 34 of /var/www/html/vendor/symfony/http-kernel/Exception/HttpException.php).

This also happens when publishing page with this component making this even more severe than I had originally thought.

This can be reproduced with the case study component from SDDS.

Ran into this with another component. Confusingly, I have 3 instances of the same component on the page, but only one of the instances loses the image.

I was able to recreate this issue with simple Image Component that we include in Experience Builder.
Attaching video recording of my browser.

The problem seems to have something to do with inconsistency in XB API responses and FE HTTP call payloads.
When image is selected via media library browser, the selected image is represented by media entity ID. React application makes XB HTTP PATCH calls to `/xb/api/layout/node/{id}` and potentially to `/xb/api/form/component-instance/node/11` in order to refresh preview and sidebar form. For example, this is how `model` part of the HTTP PATCH payload to `/xb/api/layout/node/11` looks like on my local after selecting image via media library:

{
  "source": {
    "image": {
      "expression": "ℹ︎entity_reference␟{src↝entity␜␜entity:media:image␝field_media_image␞␟entity␜␜entity:file␝uri␞␟url,alt↝entity␜␜entity:media:image␝field_media_image␞␟alt,width↝entity␜␜entity:media:image␝field_media_image␞␟width,height↝entity␜␜entity:media:image␝field_media_image␞␟height}",
      "sourceType": "static:field_item:entity_reference",
      "sourceTypeSettings": {
        "storage": {
          "target_type": "media"
        },
        "instance": {
          "handler": "default:media",
          "handler_settings": {
            "target_bundles": {
              "image": "image"
            }
          }
        }
      }
    }
  },
  "resolved": {
    "image": "2"
  }
}

Note here "resolved": { "image": "2"}.

When I hit "Review & Publish" button, multiple HTTP calls are made by the FE part of the application. There's successful POST call to `/xb/api/autosaves/publish` and successful GET call to `/xb/api/layout/node/11`.
However, the successful GET response from XB API contains resolved image as an object, instead of media entity id:

"model": {
        "354a208b-33d2-4d07-80f7-5072e5fd066d": {
            "resolved": {
                "image": {
                    "src": "\/sites\/default\/files\/2025-03\/Screenshot%202025-03-03%20at%2009.21.56_0.png",
                    "alt": "kitch",
                    "width": 1840,
                    "height": 996
                }
            },
            "source": {
                "image": {
                    "sourceType": "static:field_item:entity_reference",
                    "expression": "\u2139\ufe0eentity_reference\u241f{src\u219dentity\u241c\u241centity:media:image\u241dfield_media_image\u241e\u241fentity\u241c\u241centity:file\u241duri\u241e\u241furl,alt\u219dentity\u241c\u241centity:media:image\u241dfield_media_image\u241e\u241falt,width\u219dentity\u241c\u241centity:media:image\u241dfield_media_image\u241e\u241fwidth,height\u219dentity\u241c\u241centity:media:image\u241dfield_media_image\u241e\u241fheight}",
                    "sourceTypeSettings": {
                        "storage": {
                            "target_type": "media"
                        },
                        "instance": {
                            "handler": "default:media",
                            "handler_settings": {
                                "target_bundles": {
                                    "image": "image"
                                }
                            }
                        }
                    }
                }
            }
        }
    },

After this response, I get at least a single HTTP PATCH call to `/xb/api/layout/node/11` resulting in HTTP 500 error and potentially second HTTP PATCH call resulting in HTTP 500 to `/xb/api/form/component-instance/node/11`, depending on whether I have selected the component in the preview or not. Both API calls have the model part of their payloads for image looking like so:

{
  "resolved": {
    "image": {
      "src": "/sites/default/files/2025-03/Screenshot%202025-03-03%20at%2009.21.56_0.png",
      "alt": "kitch",
      "width": 1840,
      "height": 996
    }
  },
  "source": {
    "image": {
      "expression": "ℹ︎entity_reference␟{src↝entity␜␜entity:media:image␝field_media_image␞␟entity␜␜entity:file␝uri␞␟url,alt↝entity␜␜entity:media:image␝field_media_image␞␟alt,width↝entity␜␜entity:media:image␝field_media_image␞␟width,height↝entity␜␜entity:media:image␝field_media_image␞␟height}",
      "sourceType": "static:field_item:entity_reference",
      "sourceTypeSettings": {
        "storage": {
          "target_type": "media"
        },
        "instance": {
          "handler": "default:media",
          "handler_settings": {
            "target_bundles": {
              "image": "image"
            }
          }
        }
      }
    }
  }
}

Note "resolved": {"image" part is no longer just media entity ID, but object containing `src`, `alt`, `width` and `height`. If I understand this correctly, that's what causes failed preview (losing the image part) and HTTP 500 responses.

The actual publishing of the Node still seems to happen as intended and publishing transaction stores the correct media entity ID in Node XB field inputs.
I had separate calls with @jessebaker and @longwave + @bnjmnm and me are all unsure what the data flow should actually be - IDs or fully resolved images and what is actually supposed to be happening here. We do think however that reporting this as a bug is probably incorrect - the ability to select media entity for image, saving and publishing the node with such component is not a finished and tested functionality. Can't be a bug if we haven't finished building it :sweat_smile:

We also suspect that there are multiple Media Library adjacent issues that are all related - @longwave is already looking into issue to do with default values and thinks it's stemming from the same "unfinished feature" problem. We suspect that a meta issue is required to round up the issues around Media Library and images and outlining what exactly is missing and focusing on that.

I actually can't reproduce the issue anymore. I wonder if other work in 0.x resolved this. Would you be able to re-test this, @lauriii → ?.

@longwave is going to try to reproduce/confirm @f.mazeikis's finding in #8.

This reminded me of #3460232, which had been marked as closed in July for good reasons (see #3460232-13: Support props defaults that have content dependencies: avoid File/Media content entity dependencies → ), but this shows that we actually do need to solve that.

@f.mazeikis showed in a meeting just now that #7 is indeed no longer reproducible, but the created Pattern config entity does have an (undeclared!!!) content dependency 😬 So, reopened #3460232: #3460232-14: Support props defaults that have content dependencies: avoid File/Media content entity dependencies → .

I looked at this for a while but I don't think we need additional test coverage here, the changes in 📌 Split model values into resolved and raw Active mean that this issue should go away, suggest closing this as outdated or duplicate.

@longwave With 📌 Split model values into resolved and raw Active done, could you please double-check that this issue truly is obsolete as you wrote in #12? 🙏

Manually tested this by creating sections with some different components that use images and while there are still image related bugs I can't reproduce this exact case; in a working image component where the media has been explicitly selected then I can autosave, publish, create sections, and use those sections elsewhere, and it all seems to work as expected.

Closing as "cannot reproduce", as previously suspected I think this has been fixed elsewhere by now.