Cropper object has a circular reference, preventing static values from getting set (stimulusjs)

[mirandashort]

I need to set the cropper object as a static value so that it can be reused when I submit the form (at least I assume). When I initialize a new instance, cropper.getCroppedCanvas returns null otherwise.

export default class extends Controller {
  static targets = ["preview"]
  static values = {
    cropperTool: Object
  }

  preview(e) {
    var file = e.target.files[0]
    var done = (file) => {
      this.previewTarget.src = file
      // offending line
      this.cropperToolValue = new Cropper(this.previewTarget, {})
    }
 
    if (URL) {
      done(URL.createObjectURL(file));
    } else if (FileReader) {
      reader = new FileReader();
      reader.onload = function (e) {
        done(reader.result);
      };
      reader.readAsDataURL(file);
    }
  }
}

This is the resulting error when setting the new value:

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Cropper'
    |     property 'element' -> object with constructor 'HTMLImageElement'
    --- property 'cropper' closes the circle

When inspecting the value before setting, you can see that the object has a circular reference beginning at the element attribute:

Is this a bug/behavior that's conflicting specifically with stimulus that needs filed? Or is there another way to pass the instance to a new function? Currently using latest v1

[mirandashort]

Workaround:

      var cropper = new Cropper(this.previewTarget, {})

      const getCircularReplacer = () => {
        const seen = new WeakSet();
        return (key, value) => {
          if (typeof value === "object" && value !== null) {
            if (seen.has(value)) {
              return;
            }
            seen.add(value);
          }
          return value;
        };
      };

      const stringifiedCropper = JSON.stringify(cropper, getCircularReplacer());
      this.cropperToolValue = JSON.parse(stringifiedCropper)

Solution found here

[mirandashort]

Workaround doesn't actually work as it changes the object to a standard js object, not the Cropper constructor it once was

[mirandashort]

Actual work around is to just set the cropper object to window data. Not ideal, but it's the best/only option I can find.