-
Notifications
You must be signed in to change notification settings - Fork 4.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Possible regression in JavaScript [JSImport]/[JSExport] interop in a Blazor app (.NET 8 Preview 5) #87690
Comments
This seems like maybe something in the Blazor render logic has changed or maybe If I change the protected override async Task OnInitializedAsync()
{
Console.WriteLine ("Before ImportAsync");
await JSHost.ImportAsync("CallDotNet1",
"../Pages/CallDotNet1.razor.js");
Console.WriteLine ("ImportAsync done");
}
protected override void OnAfterRender(bool firstRender)
{
Console.WriteLine ($"In OnAfterRender first:{firstRender}");
SetWelcomeMessage();
} I see the following in the browser console:
So when we hit the I suspect previously |
Tagging subscribers to 'arch-wasm': @lewing Issue DetailsDescriptionPavel, I'm working on doc updates for the Webcil ( One of the JS import/export examples calls The section is located at ... When the component is accessed, it works as described ... When that error is checked, it appears as ... blazor.webassembly.js:1 Error: Assert failed: ES6 module CallDotNet1 was not imported yet, please call JSHost.ImportAsync() first.
protected override async Task OnInitializedAsync()
{
await JSHost.ImportAsync("CallDotNet1",
"../Pages/CallDotNet1.razor.js");
} Cross-reference: https://github.com/guardrex/BlazorWASM80Pre5WebcilCheck/blob/main/Pages/CallDotNet1.razor#L16-L17 Reproduction StepsI put up a sample app with that example ... https://github.com/guardrex/BlazorWASM80Pre5WebcilCheck Expected behaviorNo module load error in the console. Actual behaviorRegression?AFAIK, there was no error when we put the guidance up. Known WorkaroundsNone Configuration
Other informationNone
|
Doing something like this will resolve the error, but I'm not sure if that's the right thing or if this needs to be fixed in Blazor. private bool importDone;
protected override async Task OnInitializedAsync()
{
Console.WriteLine ("Before ImportAsync");
await JSHost.ImportAsync("CallDotNet1",
"../Pages/CallDotNet1.razor.js");
importDone = true;
StateHasChanged();
Console.WriteLine ("ImportAsync done");
}
protected override void OnAfterRender(bool firstRender)
{
Console.WriteLine ($"In OnAfterRender first:{firstRender}");
if (importDone)
SetWelcomeMessage();
} |
cc @maraf @javiercn @MackinnonBuck - is it expected that blazor pages will call |
@lambdageek yes. ComponentBase renders twice, once in the middle of the method when the synchronous work finishes, and another time after the async work completes. We call OnInitializedAsync, check if the returned task is not completed, render, and then queue a continuation once the task completes. The relevant code is here |
@guardrex sounds like the sample should be updated to something like #87690 (comment) so that it doesn't attempt to call the imported javascript method until the async import has completed. (seems like you can remove the call to The fact that it happened to work on earlier runtimes is probably just a happy accident, but it could break there, too, if you had other |
In one of Steve's examples, he loads his modules in |
Ok, so this ... based on a Steve example in one of our regular JS interop articles ... protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSHost.ImportAsync("CallDotNet1",
"../Pages/CallDotNet1.razor.js");
SetWelcomeMessage();
}
} ... seems to ✨ Just Work!™ ✨ without incident. Any objections to using that approach with import/export JS interop? |
btw - Is @pavelsavara out right now? He and I were working on these examples, so I was hoping to have him run an 👁️ over this to make sure he's cool with whatever we do. |
@guardrex Pavel should be back early next week FWIW I think doing it from |
I agree, and I've used Steve's approach elsewhere in the docs. I'm just not aware if Pavel sent it over that way intentionally. I'll make a note to email him next week and confirm offline that the choice is fine with him. I'll take this up now on a docs issue. Thanks all and have a great weekend! 🍻 |
I don't have strong opinion and I'm OK with the outcome :) |
Description
Pavel, I'm working on doc updates for the Webcil (
.wasm
) .NET assembly packing format for .NET 8 preview docs.One of the JS import/export examples calls
getAssemblyExports
on the app's assembly, so I was checking that example. While doing so, I noticed an error when running the example in a Pre5 test app.The section is located at ...
https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/import-export-interop?view=aspnetcore-7.0#call-net-from-javascript
When the component is accessed, it works as described ...
When that error is checked, it appears as ...
blazor.webassembly.js:1 Error: Assert failed: ES6 module CallDotNet1 was not imported yet, please call JSHost.ImportAsync() first.
JSHost.ImportAsync()
is called (and ultimately works) ...Cross-reference: https://github.com/guardrex/BlazorWASM80Pre5WebcilCheck/blob/main/Pages/CallDotNet1.razor#L16-L17
Reproduction Steps
I put up a sample app with that example ...
https://github.com/guardrex/BlazorWASM80Pre5WebcilCheck
Expected behavior
No module load error in the console.
Actual behavior
Regression?
AFAIK, there was no error when we put the guidance up.
Known Workarounds
None
Configuration
Other information
None
The text was updated successfully, but these errors were encountered: