javascriptplotlyblazorblazor-server-sideiis-express

What causes "Error: Microsoft.JSInterop.JSException: Could not find 'plotlyInterop.newPlot' ('plotlyInterop' was undefined)."?


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.


Solution

  • 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.