[Bug] Image not rendering due to mobx-state-tree action error in ImageEntity.js

[KEMSHlM]

Describe the bug
Images are not rendering in the labeling interface. Network requests for image data succeed (200 OK), but the <img> element is not generated. The browser console shows
mobx-state-tree error when the setError method attempts to modify state outside of an action context.

Console error:
Uncaught (in promise) Error: [mobx-state-tree] Cannot modify 'ImageEntity@/annotationStore/annotations/0/root/children/0/imageEntities/0(id: image#0@C17cO)', the object i　protected and can only be modified by using an action.
at ImageEntity.js:238:20

To Reproduce

1. Go to a project with images stored in AWS S3
2. Click on a task to open the labeling interface
3. Observe that the image area is blank
4. Open browser DevTools → Console tab
5. See the mobx-state-tree error

Expected behavior
The image should be displayed in the labeling interface. If image loading fails, an error message should be shown without breaking the entire rendering process.

Screenshots

The .lsf-image container only contains a 1px canvas overlay, with no <img> element:

<div class="lsf-image" style="width: 100%; height: auto;">
  <canvas class="overlay--kj18y" style="width: 1px; height: 1px; ..."></canvas>
</div>

Environment (please complete the following information):

• OS: N/A (HumanSignal Cloud)
• Label Studio Version: HumanSignal Cloud (app.heartex.com) - latest as of 2026-02-03
• Storage: AWS S3

Additional context

Root Cause Identified

cc @bmartel

The bug was introduced in #6930 (merged 2025-01-27).

In ImageEntity.js, the img.onerror callback modifies mobx-state-tree state outside of an action context:

img.onerror = () => {
    self.setError(true);        // ← This might be outside action context
    self.setDownloading(false);
    resolve();
};

Since onerror is an asynchronous callback, it may execute outside the original preload() action's context. In mobx-state-tree, modifying state outside of an action throws an exception, which could be interrupting the image rendering process.

Possible Fix (suggested by Claude)

Claude suggested that wrapping the state modifications in runInAction might resolve the issue:

import { runInAction } from "mobx";

img.onerror = () => {
    runInAction(() => {
      self.setError(true);
      self.setDownloading(false);
    });
    resolve();
};

I'm not entirely sure if this is the correct approach, so please let me know if there's a better solution.

[KEMSHlM]

@bmartel
Could you please take a look at this issue? It is blocking our work…

[bmartel]

@KEMSHlM Notified the rest of the team, I haven't been able to reproduce this myself but someone will follow up.

[nick-skriabin]

@KEMSHlM thank you for raising this issue. can you tell what image format are you using?

[hsommerv1]

@bmartel I have also been having this exact issue and will be following this. Let me know if I can do anything to help inform the solution. @nick-skriabin , your question wasn't posed to me but for my case the image formats are PNGs

[KEMSHlM]

@nick-skriabin The image format is JPG, but I don't believe the format is relevant here.

We did additional testing directly in the browser console:

const img = new Image();
img.crossOrigin = "anonymous";
img.onload = () => console.log("✅ loaded");
img.onerror = () => console.log("❌ failed");
img.src = "<task_image_url>";

Result: ✅ loaded — the image loads successfully both with and without crossOrigin = "anonymous".

This confirms the issue is not related to the image format, CORS, or S3 access. The image data is fully accessible.

Additional findings from our investigation

After further debugging, we found a second error that appears alongside the original one:

Error: [mobx-state-tree] You are trying to read or write to an object that is no longer part of a state tree.
(Object type: 'ImageEntity', Path upon death: '/annotationStore/annotations/0/root/children/0/imageEntities/0',
Subpath: 'downloading', Action: '...setDownloading()')

This suggests the issue is a race condition between #6930 and #8241:

1. createImageEntities() creates an ImageEntity and starts async preload()
2. createImageEntities() is called again (during annotation setup via addAnnotationFromPrediction)
3. imageEntities.clear() (added in fix: Prevent duplicate ImageEntity IDs in React StrictMode #8241) removes the first ImageEntity from the state tree
4. The now-dead node's async callbacks attempt to access self properties → exception
5. .catch → markAsFailed() → setError() also fails on the dead node
6. element is never created

The fix may need an isAlive(self) check before accessing state in the async callbacks:

import { isAlive } from "mobx-state-tree";

img.onload = () => {
  if (!isAlive(self)) return;
  // ... existing logic
};

Note: The prediction tab (1.0.0) displays correctly — only the annotation tab created via addAnnotationFromPrediction is affected.