Button Issue Migrating 0.9.4.4 on RC 1 to 0.9.5 on .NET 6.0 RTM

Question

Button Issue Migrating 0.9.4.4 on RC 1 to 0.9.5 on .NET 6.0 RTM

christophwille opened this issue 3 years ago · comments

I used https://blazorise.com/news/release-notes/095 to do the migration. I see the following error on navigating to a page that has Blazorise components on it:

blazor.webassembly.js:1 
        
       crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Cannot read properties of null (reading 'type')
      TypeError: Cannot read properties of null (reading 'type')
          at Module.initialize (https://localhost:5001/_content/Blazorise/button.js?v=0.9.5.0:6:17)
          at https://localhost:5001/_framework/blazor.webassembly.js:1:3332
          at new Promise (<anonymous>)
          at Object.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.webassembly.js:1:3306)
          at Object.Rt [as invokeJSFromDotNet] (https://localhost:5001/_framework/blazor.webassembly.js:1:59738)
          at _mono_wasm_invoke_js_blazor (https://localhost:5001/_framework/dotnet.6.0.0.tj42mwroj7.js:1:193780)
          at wasm://wasm/00945abe:wasm-function[2588]:0x8065b
          at wasm://wasm/00945abe:wasm-function[2307]:0x689a7
          at wasm://wasm/00945abe:wasm-function[7015]:0x17bac4
          at wasm://wasm/00945abe:wasm-function[6830]:0x172bc5
Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'type')
TypeError: Cannot read properties of null (reading 'type')
    at Module.initialize (https://localhost:5001/_content/Blazorise/button.js?v=0.9.5.0:6:17)
    at https://localhost:5001/_framework/blazor.webassembly.js:1:3332
    at new Promise (<anonymous>)
    at Object.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.webassembly.js:1:3306)
    at Object.Rt [as invokeJSFromDotNet] (https://localhost:5001/_framework/blazor.webassembly.js:1:59738)
    at _mono_wasm_invoke_js_blazor (https://localhost:5001/_framework/dotnet.6.0.0.tj42mwroj7.js:1:193780)
    at wasm://wasm/00945abe:wasm-function[2588]:0x8065b
    at wasm://wasm/00945abe:wasm-function[2307]:0x689a7
    at wasm://wasm/00945abe:wasm-function[7015]:0x17bac4
    at wasm://wasm/00945abe:wasm-function[6830]:0x172bc5
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Microsoft.JSInterop.Infrastructure.IJSVoidResult, Microsoft.JSInterop, Version=6.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
   at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, Object[] args)
   at Blazorise.Modules.JSButtonModule.Initialize(ElementReference elementRef, String elementId, Object options)
   at Blazorise.Button.<OnInitialized>b__12_0()
   at Blazorise.BaseAfterRenderComponent.OnAfterRenderAsync(Boolean firstRender)
   at Blazorise.BaseComponent.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Funny thing is, the buttons do work, and on navigating to another page & then back this error doesn't come up again. Sadly this message doesn't give (at least) me a clue where to start looking - do you have any pointers for me what might be going on?

The app started on 5.0 and I migrated to 6 during the previews once the upload limits (JS interop limits) were lifted. All the time I also upgraded Blazorise along the way.

Mladen Macanović · Answer 1 · Mon Nov 22 2021 20:26:48 GMT+0800 (China Standard Time)

That's weird. Did you remove all the occurrences of blazorise.js files from the index.html?

What browser do you use?

Christoph Wille · Answer 2 · Mon Nov 22 2021 20:38:23 GMT+0800 (China Standard Time)

blazorise.js is removed, and I used the references from https://blazorise.com/docs/start (link rel and javascript).

My F5 points to Edge Dev, same happens on Edge (Windows default). Same on Firefox (inprivate). So this is cross-browser (I never had that app open in Firefox ever)

Edit: do note though that the page I initially land on has no Blazorise components on them (index -> then login -> then go to page that has Blazorise components on them)

Damiano · Answer 3 · Mon Nov 22 2021 21:52:56 GMT+0800 (China Standard Time)

Hi,

Same issues here

After the migration to Blazorise 0.9.5, I am experiencing a strange sporadic error.

fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111] Unhandled exception in circuit 'B0ZvFuHnbbPuHrEE2a5kHvXh9N5mK0ZhA2Uh2M2WMks'. Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'type') TypeError: Cannot read properties of null (reading 'type') at Module.initialize (https://checklist/_content/Blazorise/button.js?v=0.9.5.0:6:17) at https://checklist/_framework/blazor.server.js:1:70055 at new Promise (<anonymous>) at e.beginInvokeJSFromDotNet (https://checklist/_framework/blazor.server.js:1:70021) at https://checklist/_framework/blazor.server.js:1:26303 at Array.forEach (<anonymous>) at e.invokeClientMethod (https://checklist/_framework/blazor.server.js:1:26273) at e.processIncomingData (https://checklist/_framework/blazor.server.js:1:24211) at e.connection.onreceive (https://checklist/_framework/blazor.server.js:1:17296) at WebSocket.i.onmessage (https://checklist/_framework/blazor.server.js:1:46513) at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args) at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, Object[] args) at Blazorise.Modules.JSButtonModule.Initialize(ElementReference elementRef, String elementId, Object options) at Blazorise.Button.<OnInitialized>b__12_0() at Blazorise.BaseAfterRenderComponent.OnAfterRenderAsync(Boolean firstRender) at Blazorise.BaseComponent.OnAfterRenderAsync(Boolean firstRender) at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

It seems that the rendered object does not exist.
I am investigating this issues but I do not have at the moment a reproducible case, but it happens also in other controls

warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100] Unhandled exception rendering component: Cannot read properties of null (reading 'addEventListener') TypeError: Cannot read properties of null (reading 'addEventListener') at Module.initialize (https://checklist/_content/Blazorise/textEdit.js?v=0.9.5.0:24:13)

the project is a dotnet 5 Blazor Server Web Application with render-mode = "Server"

Any hint?

Mladen Macanović · Answer 4 · Mon Nov 22 2021 22:32:32 GMT+0800 (China Standard Time)

Any hint?

Not at the moment. Any chance you could create a small project to reproduce the issue?

Christoph Wille · Answer 5 · Mon Nov 22 2021 22:33:07 GMT+0800 (China Standard Time)

Maybe Blazorise's JS runs before Blazor's JS is fully initialized? I have a bunch of JS loading in that app already, so it might be triggering that behavior (just an uneducated guess). And no, stripping down that solution is nigh on impossible.

Mladen Macanović · Answer 6 · Mon Nov 22 2021 22:35:58 GMT+0800 (China Standard Time)

It is possible that JS keeps loading before the component is not fully initialized.

Do you guys have any URL rewrite in your apps? @damianog I see you have https://checklist.

Damiano · Answer 7 · Mon Nov 22 2021 22:39:54 GMT+0800 (China Standard Time)

@stsrki no URL rewrite I only used host alias instead localhost

@christophwille do you use the NavigateTo ( no forced reload ) when it heppens?

Christoph Wille · Answer 8 · Tue Nov 23 2021 00:17:04 GMT+0800 (China Standard Time)

My navigation actually is the bog-standard left-menu from the Blazor template (NavLink component).

Damiano · Answer 9 · Tue Nov 23 2021 19:38:30 GMT+0800 (China Standard Time)

@stsrki could you consider to configure an option to switch off the javascript lazy loading so I could include them on the _host page as the old way?

Mladen Macanović · Answer 10 · Tue Nov 23 2021 19:49:20 GMT+0800 (China Standard Time)

That big of a change would break the API and would require rewriting most of the internals. So it is unlikely we would go back to the old way.

Unless we are able to reproduce the issue on our side it would be hard to fix the issue. I was thinking, and this is just my assumption, maybe I can try to Lazy the module initialization. It might help with the concurrency. That's something I will try for the next 0.9.5.1 update.

nguyendd · Answer 11 · Wed Nov 24 2021 06:45:10 GMT+0800 (China Standard Time)

I'm seeing this error as well after upgrading from 0.9.3 to 0.9.5.

Mladen Macanović · Answer 12 · Wed Nov 24 2021 23:38:30 GMT+0800 (China Standard Time)

Hey guys. Would you be willing to try the fix if I release it as a preview on MyGet? I want to make sure it is working properly before I release an official update.

Christoph Wille · Answer 13 · Wed Nov 24 2021 23:40:36 GMT+0800 (China Standard Time)

I can do that, sure.

Mladen Macanović · Answer 14 · Wed Nov 24 2021 23:57:54 GMT+0800 (China Standard Time)

@christophwille It is now up. To get it follow https://github.com/Megabit/Blazorise#try-preview

Christoph Wille · Answer 15 · Thu Nov 25 2021 00:24:20 GMT+0800 (China Standard Time)

Tried 0.9.5.1-p1 - still getting an error

blazor.webassembly.js:1 
        
       crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Cannot read properties of null (reading 'type')
      TypeError: Cannot read properties of null (reading 'type')
          at Module.initialize (https://localhost:5001/_content/Blazorise/button.js?v=0.9.5.1:6:17)
          at https://localhost:5001/_framework/blazor.webassembly.js:1:3332
          at new Promise (<anonymous>)
          at Object.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.webassembly.js:1:3306)
          at Object.Rt [as invokeJSFromDotNet] (https://localhost:5001/_framework/blazor.webassembly.js:1:59738)
          at _mono_wasm_invoke_js_blazor (https://localhost:5001/_framework/dotnet.6.0.0.tj42mwroj7.js:1:193780)
          at wasm://wasm/00945abe:wasm-function[2588]:0x8065b
          at wasm://wasm/00945abe:wasm-function[2307]:0x689a7
          at wasm://wasm/00945abe:wasm-function[7015]:0x17bac4
          at wasm://wasm/00945abe:wasm-function[6830]:0x172bc5
Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'type')
TypeError: Cannot read properties of null (reading 'type')
    at Module.initialize (https://localhost:5001/_content/Blazorise/button.js?v=0.9.5.1:6:17)
    at https://localhost:5001/_framework/blazor.webassembly.js:1:3332
    at new Promise (<anonymous>)
    at Object.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.webassembly.js:1:3306)
    at Object.Rt [as invokeJSFromDotNet] (https://localhost:5001/_framework/blazor.webassembly.js:1:59738)
    at _mono_wasm_invoke_js_blazor (https://localhost:5001/_framework/dotnet.6.0.0.tj42mwroj7.js:1:193780)
    at wasm://wasm/00945abe:wasm-function[2588]:0x8065b
    at wasm://wasm/00945abe:wasm-function[2307]:0x689a7
    at wasm://wasm/00945abe:wasm-function[7015]:0x17bac4
    at wasm://wasm/00945abe:wasm-function[6830]:0x172bc5
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Microsoft.JSInterop.Infrastructure.IJSVoidResult, Microsoft.JSInterop, Version=6.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
   at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, Object[] args)
   at Blazorise.Modules.JSButtonModule.Initialize(ElementReference elementRef, String elementId, Object options)
   at Blazorise.Button.<OnInitialized>b__12_0()
   at Blazorise.BaseAfterRenderComponent.OnAfterRenderAsync(Boolean firstRender)
   at Blazorise.BaseComponent.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Mladen Macanović · Answer 16 · Thu Nov 25 2021 04:43:27 GMT+0800 (China Standard Time)

@christophwille Can you try again with 0.9.5.1-p2?

Christoph Wille · Answer 17 · Thu Nov 25 2021 14:56:48 GMT+0800 (China Standard Time)

No still errors out:

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Cannot read properties of null (reading 'type')
      TypeError: Cannot read properties of null (reading 'type')
          at Module.initialize (https://localhost:5001/_content/Blazorise/button.js?v=0.9.5.1:6:17)
          at https://localhost:5001/_framework/blazor.webassembly.js:1:3332
          at new Promise (<anonymous>)
          at Object.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.webassembly.js:1:3306)
          at Object.Rt [as invokeJSFromDotNet] (https://localhost:5001/_framework/blazor.webassembly.js:1:59738)
          at _mono_wasm_invoke_js_blazor (https://localhost:5001/_framework/dotnet.6.0.0.tj42mwroj7.js:1:193780)
          at wasm://wasm/00945abe:wasm-function[2588]:0x8065b
          at wasm://wasm/00945abe:wasm-function[2307]:0x689a7
          at wasm://wasm/00945abe:wasm-function[7015]:0x17bac4
          at wasm://wasm/00945abe:wasm-function[6830]:0x172bc5
Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'type')
TypeError: Cannot read properties of null (reading 'type')
    at Module.initialize (https://localhost:5001/_content/Blazorise/button.js?v=0.9.5.1:6:17)
    at https://localhost:5001/_framework/blazor.webassembly.js:1:3332
    at new Promise (<anonymous>)
    at Object.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.webassembly.js:1:3306)
    at Object.Rt [as invokeJSFromDotNet] (https://localhost:5001/_framework/blazor.webassembly.js:1:59738)
    at _mono_wasm_invoke_js_blazor (https://localhost:5001/_framework/dotnet.6.0.0.tj42mwroj7.js:1:193780)
    at wasm://wasm/00945abe:wasm-function[2588]:0x8065b
    at wasm://wasm/00945abe:wasm-function[2307]:0x689a7
    at wasm://wasm/00945abe:wasm-function[7015]:0x17bac4
    at wasm://wasm/00945abe:wasm-function[6830]:0x172bc5
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Microsoft.JSInterop.Infrastructure.IJSVoidResult, Microsoft.JSInterop, Version=6.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
   at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, Object[] args)
   at Blazorise.Modules.JSButtonModule.Initialize(ElementReference elementRef, String elementId, Object options)
   at Blazorise.Button.<OnInitialized>b__12_0()
   at Blazorise.BaseAfterRenderComponent.OnAfterRenderAsync(Boolean firstRender)
   at Blazorise.BaseComponent.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
window.Module.s.printErr @ blazor.webassembly.js:1
Te._internal.dotNetCriticalError @ blazor.webassembly.js:1
Rt @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.6.0.0.tj42mwroj7.js:1
$func2588 @ 00945abe:0x8065b
$func2307 @ 00945abe:0x689a7
$func7015 @ 00945abe:0x17bac4
$func6830 @ 00945abe:0x172bc5
$func3524 @ 00945abe:0xb47cc
$func675 @ 00945abe:0x16602
$fb @ 00945abe:0x16f60e
Module._mono_wasm_invoke_method @ dotnet.6.0.0.tj42mwroj7.js:1
managed__Microsoft_AspNetCore_Components_WebAssembly__Microsoft_AspNetCore_Components_WebAssembly_Services_DefaultWebAssemblyJSRuntime_EndInvokeJS @ managed__Microsoft_AspNetCore_Components_WebAssembly__Microsoft_AspNetCore_Components_WebAssembly_Services_DefaultWebAssemblyJSRuntime_EndInvokeJS:16
endInvokeJSFromDotNet @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
Promise.then (async)
beginInvokeJSFromDotNet @ blazor.webassembly.js:1
Rt @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.6.0.0.tj42mwroj7.js:1
$func2588 @ 00945abe:0x8065b
$func2307 @ 00945abe:0x689a7
$func7015 @ 00945abe:0x17bac4
$func6830 @ 00945abe:0x172bc5
$func3524 @ 00945abe:0xb47cc
$func675 @ 00945abe:0x16602
$func6537 @ 00945abe:0x166a21
$Hb @ 00945abe:0x176082
Module._mono_background_exec @ dotnet.6.0.0.tj42mwroj7.js:1
pump_message @ dotnet.6.0.0.tj42mwroj7.js:1
setTimeout (async)
_schedule_background_exec @ dotnet.6.0.0.tj42mwroj7.js:1
$func1289 @ 00945abe:0x2f8dc
$func6721 @ 00945abe:0x16c00e
$func2588 @ 00945abe:0x806c2
$func2307 @ 00945abe:0x689a7
$func7015 @ 00945abe:0x17bac4
$func6830 @ 00945abe:0x172bc5
$func3524 @ 00945abe:0xb47cc
$func675 @ 00945abe:0x16602
$fb @ 00945abe:0x16f60e
Module._mono_wasm_invoke_method @ dotnet.6.0.0.tj42mwroj7.js:1
managed__Microsoft_AspNetCore_Components_WebAssembly__Microsoft_AspNetCore_Components_WebAssembly_Services_DefaultWebAssemblyJSRuntime_EndInvokeJS @ managed__Microsoft_AspNetCore_Components_WebAssembly__Microsoft_AspNetCore_Components_WebAssembly_Services_DefaultWebAssemblyJSRuntime_EndInvokeJS:16
endInvokeJSFromDotNet @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
Promise.then (async)
beginInvokeJSFromDotNet @ blazor.webassembly.js:1
Rt @ blazor.webassembly.js:1
_mono_wasm_invoke_js_blazor @ dotnet.6.0.0.tj42mwroj7.js:1
$func2588 @ 00945abe:0x8065b
$func2307 @ 00945abe:0x689a7
$func7015 @ 00945abe:0x17bac4
$func6830 @ 00945abe:0x172bc5
$func3524 @ 00945abe:0xb47cc
$func474 @ 00945abe:0x11875
$func6442 @ 00945abe:0x15f1e2
$func2588 @ 00945abe:0x80614
$func2307 @ 00945abe:0x689a7
$func7015 @ 00945abe:0x17bac4
$func6830 @ 00945abe:0x172bc5
$func3524 @ 00945abe:0xb47cc
$func675 @ 00945abe:0x16602
$fb @ 00945abe:0x16f60e
Module._mono_wasm_invoke_method @ dotnet.6.0.0.tj42mwroj7.js:1
managed__Microsoft_AspNetCore_Components_WebAssembly__Microsoft_AspNetCore_Components_WebAssembly_Services_DefaultWebAssemblyJSRuntime_BeginInvokeDotNet @ managed__Microsoft_AspNetCore_Components_WebAssembly__Microsoft_AspNetCore_Components_WebAssembly_Services_DefaultWebAssemblyJSRuntime_BeginInvokeDotNet:19
beginInvokeDotNetFromJS @ blazor.webassembly.js:1
b @ blazor.webassembly.js:1
e.invokeMethodAsync @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
Ee @ blazor.webassembly.js:1
ve @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
(anonymous) @ blazor.webassembly.js:1
onGlobalEvent @ blazor.webassembly.js:1

Mladen Macanović · Answer 18 · Thu Nov 25 2021 16:23:12 GMT+0800 (China Standard Time)

I'm in the dark and just guessing now. Without properly reproducing the error on my side it would be really hard to fix it 😥

I will try to see what else might be worth changing...

Christoph Wille · Answer 19 · Thu Nov 25 2021 16:26:12 GMT+0800 (China Standard Time)

Please see your Gmail email. Other than that - other libs that do this dynamic loading?

Mladen Macanović · Answer 20 · Thu Nov 25 2021 16:51:24 GMT+0800 (China Standard Time)

Did you clear the cache after the last 0.9.5.1-p2?

Christoph Wille · Answer 21 · Thu Nov 25 2021 16:55:53 GMT+0800 (China Standard Time)

Edit: we emailed and were able to sort out the caching. I tried with Edge, Edge Dev, Chrome inprivate and Firefox inprivate - all work now.