Aspnetcore: Unhandled exception rendering component: Microsoft.JSInterop.JSException: Cannot read property 'ownerDocument' of null

[AlexCorona55]

Describe the bug

Hello, im pretty new with Blazor WASM. Also this is my first github issue, so if there is a problem with the description, please let me know to fix it and improve :)

I've an inconsistent exception when rendering a component with two @page annotations:

@page "/partnerForm"
@page "/partnerForm/{Id:int}"
@attribute [Authorize]
@using Microsoft.AspNetCore.Authorization

The first one causes the exception listened below when the navigation occures (actually, the OnInitializedAsync event exectues fine, but the exception occures whith the rendering).
Also, when i refresh, the flow is normal, no exceptios, no errors, no warnings.

The second one does not cause any problem at all.

To Reproduce

The navigations is like this from another component:

1. NavigationManager.NavigateTo("partnerForm"); (this causes the exception)
2. NavigationManager.NavigateTo($"partnerForm/{id}"); (this works fine).

Exception:

Further technical details

• ASP.NET Core version 3.1.1
• Blazor 3.2 preview1.20073.1
• The IDE is VS 16.4.5

[javiercn]

@AlexCorona55 thanks for contacting us.

From what I can tell from the stack trace, looks like a null reference exception in your code. From what I can read from the stack trace, I believe is inside the JS code you are calling through interop.

I would suggest you put some breakpoints in there and see what's going on. It is likely that you are not retrieving something based on that ID in the first case and you are passing a null value down to the JavaScript.

Hope that helps.

PS: Great first issue, keep them coming 😄

[AlexCorona55]

@javiercn thanks for the reply.

I'm not calling any JS code "directly" (because i don't know if blazor use interop in any point of the flow).

In that case, I don´t realize why the component works when is routed with a parameter and also when i refresh the page after the error.

With the debugger, all is fine until the OnInitializedAsync event ends, after that, when the render occures, the exception happen.

[javiercn]

@AlexCorona55 can you provide a minimal repro project so that we can help you out?

[AlexCorona55]

Hi @javiercn, right now I'm not working in that project because "priority", but I'll try to do it on my free time. The last time, i detect a problem with my HttpMessageHanlders. When i route to the problematic component, the HttpClient pipeline start and throw an exception when the Handlers catch the HttpRequest. But as i said, i was not able to see the problem for the lack of time. I hope i can continue with this the next week.

In conclusion, yes, the root of the problem is in any of the JS interop calls of my handlers.

[AlexCorona55]

Finally I can solve the problem.
I was using EJS grid from Syncfusion. Seems like the rendering keep going even after the navigation, and that causes the problem.

What i did is this (i know, I'm a monster, but is a good first approach):

<button class="btn btn-primary mt-2" @onclick="NewForm">New Form</button>

private async Task NewForm()
    {
        await Task.Run(() => NavigationManager.NavigateTo("formForm"));
    }

Basically, i change the navigation to work asynchronously.

Now the question is:
Is there a better way to achieve this?

[SteveSandersonMS]

I think this is something you need to raise with the EJS grid maintainers. It sounds like they are doing something on a timer in the background and perhaps aren't stopping the background work at the right time when the component is being removed from the UI.

[AlexCorona55]

Thanks @SteveSandersonMS
I'm wondering what it could be. I'll put a ticket with the question.
I think its ok if the issue is closed now, since there is no bug.

Thanks a lot guys, for the help and for making Blazor awesome!

[gustavnavar]

I think I have the same issue than @AlexCorona55

I work with the GridBlazor component and the WA demo project GridBlazorClientSide.Client is the one getting these exceptions

The project was working with no exceptions with 3.2.0-preview2 (commit https://github.com/gustavnavar/Grid.Blazor/commit/e1aa226db0f7befa0108aa5e47143c799aac90b7)

As soon as I upgraded to 3.2.0-preview3 the code started throwing the following exception when rendering this component ButtonCellEdit and it's locked after opening it:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Cannot read property 'ownerDocument' of null
      TypeError: Cannot read property 'ownerDocument' of null
          at e.updateComponent (https://localhost:44377/_framework/blazor.webassembly.js:1:12763)
          at Object.t.renderBatch (https://localhost:44377/_framework/blazor.webassembly.js:1:1704)
          at Object.window.Blazor._internal.renderBatch (https://localhost:44377/_framework/blazor.webassembly.js:1:33252)
          at _mono_wasm_invoke_js_unmarshalled (https://localhost:44377/_framework/wasm/dotnet.3.2.0-preview3.20168.1.js:1:162187)
          at wasm_invoke_iiiiii (wasm-function[3152]:0x9d1fe)
          at icall_trampoline_dispatch (wasm-function[5757]:0xfed16)
          at mono_wasm_interp_to_native_trampoline (wasm-function[4591]:0xcc134)
          at ves_pinvoke_method (wasm-function[3201]:0x9ebfa)
          at interp_exec_method (wasm-function[1115]:0x2564d)
          at interp_runtime_invoke (wasm-function[5637]:0xf8709)
Microsoft.JSInterop.JSException: Cannot read property 'ownerDocument' of null

I used the workaround mentioned by @AlexCorona55, and the app gets no lock anymore, but exceptions continue appearing on the debug console