I use Plotly Blazor with Server-side Blazor. When I open new window containing Plotly graph using JS Interop:
JSRuntime.InvokeVoidAsync("open", System.Threading.CancellationToken.None, $"/chart/{b}/{(int)readingType}", "_blank");
I get an error:
Error: Microsoft.JSInterop.JSException: Could not find 'plotlyInterop.newPlot' ('plotlyInterop' was undefined).
Error: Could not find 'plotlyInterop.newPlot' ('plotlyInterop' was undefined).
From what I understand the javascript is missing in this page. I followed the lead of violating Content Security Policy but this took me nowhere. When I reload, clicking Refresh button, the page reloads and works normally. The script was loaded.
The issue only occurs in development environment while using IISExpress as a server with Visual Studio 2022 Version 17.3.6. When I deploy on Nginx running on Raspberry Pi, I do not get this error.
Any suggestions how to resolve the issue would be appreciated.
It has been pointed out that the script is not ready by @Nb777. After I changed the order of scripts in _Layout.cshtml
(.NET 6) for Plotly to be called before blazor.server.js
the issue seems to go away.
@RenderBody()
<script src="_content/Plotly.Blazor/plotly-latest.min.js" type="text/javascript"></script>
<script src="_content/Plotly.Blazor/plotly-interop.js" type="text/javascript"></script>
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
<script src="_framework/blazor.server.js"></script>
This has to do with the order the scripts are loaded or the timing.