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 · 21 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.

Answer 1 · 2021-11-22T12:26:48.000Z

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

What browser do you use?

Answer 2 · 2021-11-22T12:38:23.000Z

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)

Answer 3 · 2021-11-22T13:52:56.000Z

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?

Answer 4 · 2021-11-22T14:32:32.000Z

Any hint?

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

Answer 5 · 2021-11-22T14:33:07.000Z

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.

Answer 6 · 2021-11-22T14:35:58.000Z

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.

Answer 7 · 2021-11-22T14:39:54.000Z

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

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

Answer 8 · 2021-11-22T16:17:04.000Z

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

Answer 9 · 2021-11-23T11:38:30.000Z

@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?

Answer 10 · 2021-11-23T11:49:20.000Z

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.

Answer 11 · 2021-11-23T22:45:10.000Z

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

Answer 12 · 2021-11-24T15:38:30.000Z

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.

Answer 13 · 2021-11-24T15:40:36.000Z

I can do that, sure.

Answer 14 · 2021-11-24T15:57:54.000Z

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

Answer 15 · 2021-11-24T16:24:20.000Z

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)

Answer 16 · 2021-11-24T20:43:27.000Z

@christophwille Can you try again with 0.9.5.1-p2?

Answer 17 · 2021-11-25T06:56:48.000Z

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

Answer 18 · 2021-11-25T08:23:12.000Z

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...

Answer 19 · 2021-11-25T08:26:12.000Z

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

Answer 20 · 2021-11-25T08:51:24.000Z

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

Answer 21 · 2021-11-25T08:55:53.000Z

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.