<Sider> JsonException when deserialize Window information

When I use Sider with responsive configuration it doesn’t work. It produces a System.Text.Json.JsonException error in the browser console:

Uncaught (in promise) Error: System.Text.Json.JsonException: The JSON value could not be converted to AntDesign.JsInterop.Window. Path: $ | LineNumber: 0 | BytePositionInLine: 54. at System.Text.Json.ThrowHelper.ThrowJsonException_DeserializeUnableToConvertValue (:44347/System.Type propertyType) <0x3294058 + 0x00032> in <filename unknown>:0 at System.Text.Json.JsonPropertyInfoNotNullable'4[TClass,TDeclaredProperty,TRuntimeProperty,TConverter].OnRead (:44347/System.Text.Json.ReadStack& state, System.Text.Json.Utf8JsonReader& reader) <0x3293db0 + 0x00016> in <filename unknown>:0 at System.Text.Json.JsonPropertyInfo.Read (:44347/System.Text.Json.JsonTokenType tokenType, System.Text.Json.ReadStack& state, System.Text.Json.Utf8JsonReader& reader) <0x309ede8 + 0x000c8> in <filename unknown>:0 at System.Text.Json.JsonSerializer.HandleValue (:44347/System.Text.Json.JsonTokenType tokenType, System.Text.Json.JsonSerializerOptions options, System.Text.Json.Utf8JsonReader& reader, System.Text.Json.ReadStack& state) <0x309eb48 + 0x000a6> in <filename unknown>:0 at System.Text.Json.JsonSerializer.ReadCore (:44347/System.Text.Json.JsonSerializerOptions options, System.Text.Json.Utf8JsonReader& reader, System.Text.Json.ReadStack& readStack) <0x3095b78 + 0x00340> in <filename unknown>:0 at System.Text.Json.JsonSerializer.ReadValueCore (:44347/System.Text.Json.JsonSerializerOptions options, System.Text.Json.Utf8JsonReader& reader, System.Text.Json.ReadStack& readStack) <0x308f4a8 + 0x00592> in <filename unknown>:0 at System.Text.Json.JsonSerializer.ReadValueCore (:44347/System.Text.Json.Utf8JsonReader& reader, System.Type returnType, System.Text.Json.JsonSerializerOptions options) <0x30775a0 + 0x0003e> in <filename unknown>:0 at System.Text.Json.JsonSerializer.Deserialize (:44347/System.Text.Json.Utf8JsonReader& reader, System.Type returnType, System.Text.Json.JsonSerializerOptions options) <0x3077438 + 0x00024> in <filename unknown>:0 at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.ParseArguments (:44347/Microsoft.JSInterop.JSRuntime jsRuntime, System.String methodIdentifier, System.String arguments, System.Type[] parameterTypes) <0x3292bf8 + 0x00162> in <filename unknown>:0 at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.InvokeSynchronously (:44347/Microsoft.JSInterop.JSRuntime jsRuntime, Microsoft.JSInterop.Infrastructure.DotNetInvocationInfo& callInfo, Microsoft.JSInterop.Infrastructure.IDotNetObjectReference objectReference, System.String argsJson) <0x327b198 + 0x0010c> in <filename unknown>:0 at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.BeginInvokeDotNet (:44347/Microsoft.JSInterop.JSRuntime jsRuntime, Microsoft.JSInterop.Infrastructure.DotNetInvocationInfo invocationInfo, System.String argsJson) <0x327a648 + 0x0009e> in <filename unknown>:0 at Object.endInvokeDotNetFromJS (blazor.webassembly.js:1) at Object.invokeJSFromDotNet (blazor.webassembly.js:1) at _mono_wasm_invoke_js_marshalled (dotnet.3.2.0.js:1) at do_icall (:44347/<anonymous>:wasm-function[6049]:0x10f8b1) at do_icall_wrapper (:44347/<anonymous>:wasm-function[1896]:0x50b6a) at interp_exec_method (:44347/<anonymous>:wasm-function[1120]:0x2588e) at interp_runtime_invoke (:44347/<anonymous>:wasm-function[5655]:0xf7391) at mono_jit_runtime_invoke (:44347/<anonymous>:wasm-function[5109]:0xddb3d) at do_runtime_invoke (:44347/<anonymous>:wasm-function[1410]:0x3ba85) at mono_runtime_try_invoke (:44347/<anonymous>:wasm-function[418]:0xcfdb)

The code I used for this was the layout documentation example https://ant-design-blazor.github.io/en-US/components/layout#components-layout-demo-responsive.

[yoli799480165]

It’s a known bug, if you set breakpoint and resize window, it produces this error. I’m trying to figure out how it came about, and finally I found this:

export function addDomEventListener(element, eventName, invoker) {
  let callback = args => {
    const obj = {};
    for (let k in args) {
      obj[k] = args[k];
    }
    let json = JSON.stringify(obj, (k, v) => {
      if (v instanceof Node) return 'Node';
      if (v instanceof Window) return 'Window';
      return v;
    });
    invoker.invokeMethodAsync('Invoke', json);
  };

  if (element == 'window') {
    if (eventName == 'resize') {
      window.addEventListener(eventName, debounce(() => callback({ innerWidth: window.innerWidth, innerHeight: window.innerHeight }), 200, false));
    } else {
      window.addEventListener(eventName, callback);
    }
  } else {
    let dom = getDom(element);
    (dom as HTMLElement).addEventListener(eventName, callback);
  }
}

If passing the obj instead of the json string to ‘invokeMethodAsync’, it will work fine. After doing some tests, we will fix it later. @ElderJames

[anddrzejb]

Thanks for coming back! A lot of devs seem to ignore requests for feedback here (my experience at least 😞). So kudos to you! 👍🏻