RenderComponentAsync inside the MVC app

[konradcinkusz]

I have an existing ASP.NET MVC and I try to use my blazor component as follow:

@(await Html.RenderComponentAsync<MyComponent>(RenderMode.Server))

And it seems that polyfill doesn't work with this case. I mean, I cannot call any method within the component (like clicking Save button and calling an API). With ServerPrerendered the oninitialize method is call, but there are no interaction.

Is there any special configuration for that type of solution (MVC + Blazor)? I use default settings with UseBlazorPolyfill options, but I have tested many configuration and it seems that all of this doesn't work.

[Daddoon]

Nothing should prevent you to use your code, is just a polyfill. Is also blazor.polyfill.js referenced in your starting page ? How look your Blazor starting page ?

The blazor.polyfill file must be declared just before the blazor.server.js declaration. Also do you have any error logs in the console ?

[konradcinkusz]

Yes, I have declared just before blazor.server.js at the end of my script section.

I have blazor.polyfill.min.js in Edge Sources as follow:

I have also this file using Opera.

Moreover, the components only renders with RenderMode.ServerPrerendered (and with this mode the oninitialize method is called), and of course with RenderMode.Static. With RenderMode.Server nothing happens.

No errors and any releated log to polyfill in console.

[Daddoon]

I see that you are using this in an ASP.NET MVC application with some Blazor components. I never tested this kind of scenario.

But before we dig into something else:

• Can you force the option ForceES5Fallback to true in your Startup.cs file ? More doc here
• Do your Blazor component in ASP.NET MVC does work even without Blazor.Polyfill enabled, on a regular modern web browser ? Can you temporaly comment the Startup declaration on the server and the js file declaration for Blazor.Polyfill, and just test if this work on a regular browser ?
• Otherwise, is there any "defer" attribute option or something like that on your blazor.server.js or blazor.polyfill.js script declaration ? If yes, remove it.
• Just in case it would be a kind of bug with autostart...Can you try to add the autostart attribute on blazor.server.js node ? Like:

<script src="_framework/blazor.server.js" autostart="true"></script>

You may also test this with autostart="false", and try to manually load Blazor afterward with a script with Blazor.start method call. More info about this here

• If possible if nothing here put you further, do you have any reproductible test project that i can eventually look and debug ?

I'm using Blazor.Polyfill on a business project and it does work well on IE11.

The other possibility that the Blazor.polyfill break, is if there is a major Blazor Server / Blazor.Server.js update that would not work against the default patched one returned by the Polyfill, as some functionnalities sometime cannot be directly fixed only by transpiling the blazor.server.js file to ES5.

Current version of Blazor.Polyfill was tested against .NET version 6.0.200 . What is your version when typing dotnet --version in a terminal ?

[konradcinkusz]

I set ForceES5Fallback to true Everything is working perfectly with others web browsers. I don't see any defer attribute. I tested with autostart true and false with Blazor.start

I am using 6.0.200

And still doesn't work. I try to prepare reproductible test project.

[Daddoon]

Also just to be sure, is this ONLY not working on Opera ? or also on IE11 ? Just to know if this is a widely problem due to the project configuration, or just that it doesn't work out of the box on Opera.

I never tested this Polyfill on Opera.

[konradcinkusz]

Actually, the components render properly on Opera without Polyfill, and still working after Polyfill added. So the problem is only with Edge, but it could be the reason, I am using the last edge version, and as it is mentioned on the description, polyfill works only with edge legacy. I developed app for MS teams, and as far as I know teams use chromium, and within MS Teams blazor component also doesn't render.

[Daddoon]

This remind me an Edge specific bug, even if i thought this it was on Edge Legacy only.

The bug was that some polyfills included in Blazor.Polyfill would break Edge somehow, even if it work out of the box on all other browsers.

If this is this (and i can't be sure, i'm just guessing), i think it was maybe related to core-js but i can only guess. Does your Blazor project works on Edge (Chromium) without Blazor.Polyfill ?

If it works on the modern edge without Polyfills, before i try to do something about that, you may filter to not use the ES5 fallback on Edge browser specifically, by using the ES5FallbackValidation predicate method in your Startup.cs, by reading the HttpRequest User-Agent , and returning true or false depending of the detected browser. Of course maybe try to disable "ForceES5Fallback" on the other-side.

If false is set, the server will return the original blazor.server.js file without any alteration, and blazor.polyfill.js will be dummy file, so no polyfill alteration.

[konradcinkusz]

No, on Edge Chromium it doesn't work. Adding or removing Blazor.Polyfill does not change anything. One error occurs in Edge console without Blazor.Polyfill: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 With Blazor.Polyfill I don't have this error but anything else are not changed.

Ok, I will try to not use ES5 fallback on Edge browser.

Blazor.polyfill.min.js is loaded in every browser, but it is a dummy file if I don't set ForceES5Fallback to true, am I right?

I will also try to prepare example project, it should be just a simple MVC app with Blazor like in this tutorial: https://www.syncfusion.com/faq/blazor/general/how-do-you-use-blazor-in-an-existing-asp-net-mvc-application

[Daddoon]

Well, if it doesn't work even without Blazor.Polyfill on Edge, don't mind to test the ES5Fallback predicate, i mean, it's surely something wrong on Edge Chromium or a mix with this and ASP.NET MVC.

Pretty surprised that it does not work well by default on Microsoft own browser.

Blazor.polyfill.min.js is loaded in every browser, but it is a dummy file if I don't set ForceES5Fallback to true, am I right?

Exactly, and same logic with the ES5Fallback method predicate. This is done like this in order to not having to manage complex script initialization scenario, and only defer the logic to the server-side. Also, the ETag should be a little different in one or another scenario, in order to prevent the browser to cache the content, if suddenly the file content change for any reasons.

Thanks for the possible test project. Do you mind also sharing me your Edge version and/or the MS Team Edge version (if possible) through a User-Agent info ?

[konradcinkusz]

Edge version is 101.0.1210.39 (x64) MS Teams: 1.5.00.11163 (x64)

I've created similar project, but it seems that everything works perfectly even without Polyfill. https://github.com/konradcinkusz/blazorinmvc

I am investigating now to reproduce this error.

[Daddoon]

Kind of a bad and good news for you !

Does your project fail only when using Syncfusion library ? As you might imagine, not all Razor Class Library may have ES5 compatibility in mind.

That's why i tried to implement an option that automatically transpile any referenced RCL to ES5, and cache it in your project for future usage (but will be regenerated at least once in your project if the library files are altered).

Can you try to enable the ES5ConversionScope to ES5ConversionScope.RazorClassLibrary ? Then try if your project still doesn't work.

Also the issue is maybe not related to this thing but you can give a try. I'm using Syncfusion on a Business Project and had to set this option in order to have Syncfusion library working fully on IE11.

[konradcinkusz]

Sorry I made some misunderstanding, you mention that:

If it works on the modern edge without Polyfills, before i try to do something about that, you may filter to not use the ES5 fallback on Edge browser specifically, by using the ES5FallbackValidation predicate method in your Startup.cs, by reading the HttpRequest User-Agent , and returning true or false depending of the detected browser. Of course maybe try to disable "ForceES5Fallback" on the other-side.

it won't work in moder edge without Polyfills.

I am not using Syncfusion, I mention this site because they have good tutorials on how to integrate blazor with mvc. On the other hand, the example project which I've shared works. I tried with the RazorClassLibrary scope and it is still not working.

[Daddoon]

I think I understood right:

• Your project does not works on Edge Chromium without Polyfill.
• The example project with MVC / Blazor Edge Chromium does works without Polyfill.

So this mean that under general circonstances, Blazor with MVC does work on Edge Chromium by default, and so, the issue you are having is not directly related to a missing polyfill...I mean apparently.

Something is maybe wrong or conflicting on your project and you will have to check what, but is i think not related to this project. Are you having the issue on your dev machine or a production server ?

Without a faulty project as a sample, i can't guess anything else to help you.

[konradcinkusz]

My Blazor Components do not work on Edge Chromium at all, Polyfill does not change anything. Striclty, my blazor components do not render on Edge Chromium.

Yes, the example project works without Polyfill.

Yes, you are probably right, something is conflicting on my project, but now idea what. I am having this issue with my local and production. I tried to reproduce this behaviour on my test project.

[konradcinkusz]

It seems that by default everything works, @Daddoon I think we can close this issue by now, as it is releated to the specific configuration of my project. I am investigating now if I find a solution I will recreate or reopen this issue with that solution.

[Daddoon]

Sound right ! Thanks for your own investigation. Good luck on your project !