Blazor WebApp template not working with @rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)" #9334

magnus.bredeli@apx-systems.com created 24 days ago

Hello!

I created a brand new Blazor WebApp application using ABP Studio. By default, the rendermode in App.razor is set to @rendermode="InteractiveAuto". However, I want to use this rendermode instead @rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)". After doing the change in App.razor I am not able to run run the application without getting an error when browsing the page (https://localhost:44301/).

Exception message and full stack trace:

blazor.web.js:1 ManagedError: One or more errors occurred. (An error occurred during the initialize Volo.Abp.Modularity.OnApplicationInitializationModuleLifecycleContributor phase of the module Volo.Abp.AspNetCore.Components.WebAssembly.AbpAspNetCoreComponentsWebAssemblyModule, Volo.Abp.AspNetCore.Components.WebAssembly, Version=9.1.1.0, Culture=neutral, PublicKeyToken=null: Could not find 'abp.utils.removeOidcUser' ('abp' was undefined).
Error: Could not find 'abp.utils.removeOidcUser' ('abp' was undefined).
    at blazor.web.js:1:384
    at Array.forEach (<anonymous>)
    at l.findFunction (blazor.web.js:1:352)
    at _ (blazor.web.js:1:5101)
    at blazor.web.js:1:2894
    at new Promise (<anonymous>)
    at w.beginInvokeJSFromDotNet (blazor.web.js:1:2857)
    at Object.jr [as invokeJSJson] (blazor.web.js:1:165356)
    at invoke-js.ts:319:31
    at Fc (:44301/_framework/do…eption for details.)
    at blazor.web.js:1:384
    at Array.forEach (<anonymous>)
    at l.findFunction (blazor.web.js:1:352)
    at _ (blazor.web.js:1:5101)
    at blazor.web.js:1:2894
    at new Promise (<anonymous>)
    at w.beginInvokeJSFromDotNet (blazor.web.js:1:2857)
    at Object.jr [as invokeJSJson] (blazor.web.js:1:165356)
    at invoke-js.ts:319:31
    at Fc (:44301/_framework/do…eption for details.)
    at an (marshal-to-js.ts:420:18)
    at Kt.resolve_or_reject (marshal-to-js.ts:315:28)
    at marshal-to-js.ts:363:16
    at marshal-to-js.ts:341:48
    at fr (invoke-js.ts:523:9)
    at Fc (marshal-to-js.ts:341:5)
    at 00b5b776:0x1f1a4
    at 00b5b776:0x1c8ae
    at 00b5b776:0xea19
    at 00b5b776:0x1ec88
callEntryPoint	@	blazor.web.js:1
await in callEntryPoint		
Hr	@	blazor.web.js:1
await in Hr		
Fr	@	blazor.web.js:1
startWebAssemblyIfNotStarted	@	blazor.web.js:1
resolveRendererIdForDescriptor	@	blazor.web.js:1
determinePendingOperation	@	blazor.web.js:1
refreshRootComponents	@	blazor.web.js:1
(anonymous)	@	blazor.web.js:1
setTimeout		
rootComponentsMayRequireRefresh	@	blazor.web.js:1
onDocumentUpdated	@	blazor.web.js:1
Hi	@	blazor.web.js:1

Steps to reproduce the issue:

Create new Blazor WebApp project using ABP Studio with the same configuration:

Template: app
Created ABP Studio Version: 0.9.26
Current ABP Studio Version: 0.9.26
Tiered: No
Multi-Tenancy: Yes
UI Framework: blazor-webapp
Theme: leptonx
Theme Style: system
Theme Menu Placement: side
Run Install Libs: Yes
Database Provider: ef
Database Management System: sqlserver
Separate Tenant Schema: No
Create Initial Migration: Yes
Run Db Migrator: Yes
Mobile Framework: none
Public Website: No
Social Login: Yes
Include Tests: Yes
Kubernetes Configuration: Yes
Distributed Event Bus: none
Use Local References: No
Optional Modules:
- GDPR
- TextTemplateManagement
- LanguageManagement
- AuditLogging
- OpenIddictAdmin
Create Command: abp new AbpSolution1Test -t app --ui-framework blazor-webapp --database-provider ef --database-management-system sqlserver --theme leptonx --without-cms-kit --dont-run-bundling -no-file-management

Change from @rendermode="InteractiveAuto" to @rendermode="new InteractiveWebAssemblyRenderMode(prerender: false)" in App.razor

EngincanV created 24 days ago

Support Team .NET Developer

Hi, you're encountering this error because changing the render mode to InteractiveWebAssemblyRenderMode (with prerender: false) shifts your Blazor app to pure WebAssembly mode, which doesn't execute any server-side code at startup.

The default ABP Blazor WebApp project uses Blazor Server + WebAssembly hybrid mode (InteractiveAuto). Switching to pure WebAssembly breaks this assumption, so if you want your all application as blazor wasm, you don't need to start with a blazor web app template. It's used to mix the both approaches, and deciding per component/page.

Regards.

magnus.bredeli@apx-systems.com created 24 days ago

I see, thank you for answering.

We noticed in our application that it loads the page pretty quickly first, but non-interactive, then after some seconds, loads the application WebAssembly which is interactive. This is, as far as I've understood, the pre-rendering showing a non-interactive server-side rendered version of the page as a placeholder while the client application is loading.

Is there a way to skip the step of fetching everything twice, first on the server and then on the client? Users mistake the prerendered page to be a broken page that is not working. We are currently doing all loading of data in the OnInitializedAsync lifecycle method.

Also, is it very complex to convert form an ABP Blazor WebApp to ABP Blazor WASM, and do you have any guide for doing so?

EngincanV created 23 days ago

Support Team .NET Developer

We noticed in our application that it loads the page pretty quickly first, but non-interactive, then after some seconds, loads the application WebAssembly which is interactive. This is, as far as I've understood, the pre-rendering showing a non-interactive server-side rendered version of the page as a placeholder while the client application is loading.

Yes, that's totally correct. This is how our Blazor WebApp template works.

Is there a way to skip the step of fetching everything twice, first on the server and then on the client? Users mistake the prerendered page to be a broken page that is not working. We are currently doing all loading of data in the OnInitializedAsync lifecycle method.

If you don't want this behavior, I suggest you go with Blazor WASM.

Also, is it very complex to convert form an ABP Blazor WebApp to ABP Blazor WASM, and do you have any guide for doing so?

Actually, we don't have a guide to show you how to migrate from Blazor WebApp to Blazor WASM, but we have a guide that shows the opposite, migrating from Blazor to Blazor WebApp, which you can check at https://abp.io/docs/9.2/release-info/migration-guides/abp-8-2-blazor-web-app

You can check this documentation to see the main differences in the template and apply it to your own template to make it pure Blazor WASM application. For example, as a first step, you need to configure AbpAspNetCoreComponentsWebOptions and set IsBlazorWebApp property as false etc.