epetersoni commented 2 weeks ago

🐛 Bug Report

I have a Blazor component containing a NimbleDialog that we want to have open when the component first renders. Intermittently (maybe 30% of the time), I get this JavaScript error about not finding the show function:

Warning: Unhandled exception rendering component: "dialogReference.show is not a function TypeError: dialogReference.show is not a function at Object.show ( http://localhost:59798/_content/NimbleBlazor/NimbleBlazor.lib.module.js:151:50) at http://localhost:59798/_framework/blazor.server.js:1:3244 at new Promise () at y.beginInvokeJSFromDotNet ( http://localhost:59798/_framework/blazor.server.js:1:3201) at Xt._invokeClientMethod ( http://localhost:59798/_framework/blazor.server.js:1:61001) at Xt._processIncomingData ( http://localhost:59798/_framework/blazor.server.js:1:58476) at Xt.connection.onreceive ( http://localhost:59798/_framework/blazor.server.js:1:52117) at s.onmessage ( http://localhost:59798/_framework/blazor.server.js:1:80262)"%22)

💻 Repro or Code Sample

I created a simple reproducing example as follows:

Create a new .NET 8 Blazor project.
Add references to NimbleBlazor and Radzen.Blazor nuget packages.
Add references to _content/NimbleBlazor/nimble-components/all-components-bundle.min.js and _content/Radzen.Blazor/Radzen.Blazor.js scripts in App.razor.
Replace the code in Home.razor with
```
@page "/"
```

<NimbleBlazor.NimbleDialog TCloseReason="string" @ref="_dialog"> Dialog content </NimbleBlazor.NimbleDialog>

@code { private NimbleDialog _dialog = null!;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await _dialog.ShowAsync();
    }
    await base.OnAfterRenderAsync(firstRender);
}

}


5. Run the application. If the JavaScript error doesn't happen, you can refresh the page and it should happen eventually.

Note that I could not get this to reproduce without the Radzen script there in addition to the Nimble one. I suspect the extra script is affecting the timing of loading the Nimble one, such that sometimes it has not been loaded by the time the component renders.

## 🤔 Expected Behavior

The dialog should successfully render every time.

## 😯 Current Behavior

The dialog fails to render sometimes and we get a Blazor error.

## 💁 Possible Solution

A way to resolve the race condition (if that's what happening), or guidance on a way we could have our component wait until it knows the script is ready before trying to open the dialog.

## 🔦 Context

For Armstrong, we're going to be requesting that the WPF app hosting the sequencer in a web view (InstrumentStudio) be able to show a modal dialog with a web view that displays a Blazor dialog. To implement that Blazor dialog we're creating a component like the one described here, that opens immediately after rendering. Our web app has the Nimble + Radzen scripts as described here, so I'm seeing the issue some of the time.

Note that this is not a requirement for our end of June release, but is required for our C3 work.

## 🌍 Your Environment

* OS & Device: Windows 10
* Browser: Firefox

rajsite commented 2 weeks ago

Add references to [...] scripts in App.razor.

Our docs say to include the script in _Layout.cshtml which to my understanding is the top-level layout page where the <body> / <head> tags are defined by default. Do you have the timing issue if the nimble script tags are included in the _Layout.cshtml file instead of in App.razor as described in the docs?

Some other ideas on top of moving the script loading to _Layout.cshtml:

If the nimble script is always the first script (before any other blazor scripts, third party scripts, etc) does the issue reproduce?
Can you confirm how the script is loaded synchronously with <script src="_content/NimbleBlazor/nimble-components/all-components-bundle.min.js"></script>, note it does not have type=module, or defer / async specified.

epetersoni commented 2 weeks ago

The default Blazor project templates have seen some significant updates with the last couple .NET releases. I believe _Layout.cshtml was the default place with <body> / <head> tags for the .NET 6 Blazor project templates. For our actual Armstrong code, we're still based off of the .NET 7 template, which doesn't have _Layout.cshtml and uses Pages/_Host.cshtml instead.

With the .NET 8 template, which is what I used for the reproducing example, those tags have moved into App.razor and there is no longer a .cshtml file included.

I'm not sure what has changed, but today I've been unable to reproduce using the above steps to reproduce. But it still does reproduce in our full application.

I'll try moving the Nimble script first in our full app and see if that helps.

epetersoni commented 2 weeks ago

With the Nimble script moved first in our full app, I've been unable to reproduce this after dozens of attempts. With the Blazor script moved back in front, I can reproduce within a few attempts.

So that appears to be a fix, and I don't notice any other differences in behavior. @rajsite Do you think that's the correct fix, or is there something else I should try?

atmgrifter00 commented 2 weeks ago

With the Nimble script moved first in our full app, I've been unable to reproduce this after dozens of attempts. With the Blazor script moved back in front, I can reproduce within a few attempts.

So that appears to be a fix, and I don't notice any other differences in behavior. @rajsite Do you think that's the correct fix, or is there something else I should try?

@epetersoni, could you provide some more clarity around what specific scripts you are arranging? When you say "Nimble script" are you referring to the workaround script (I presume not, as I think we've realized that this isn't relevant), or the all-components script? Presuming the latter case, it's not clear why your changes would be correcting the problem, but we don't believe it should be problematic either.

The larger concern, which I think @rajsite can expand on if needed, is whether or not there is an underlying issue (or expectation) that Microsoft has introduced for how scripts are loaded in a Blazor app. The working theory is that no scripts would attempt to be executed until after window.onload finishes.

epetersoni commented 2 weeks ago

@atmgrifter00 It is the latter case - I moved the all-components script to before the Blazor server script.

Some of our end-to-end tests which were already slightly intermittent started to fail much more frequently around the time of this change, but I'm not clear on how that might be related.

ni / nimble

Possible race condition showing Blazor NimbleDialog during OnAfterRenderAsync #2188

🐛 Bug Report

💻 Repro or Code Sample