What causes "Error: Microsoft.JSInterop.JSException: Could not find 'plotlyInterop.newPlot' ('plotlyInterop' was undefined)."?
maciej-napora opened this issue · comments
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).
at https://localhost:5001/_framework/blazor.server.js:1:497
at Array.forEach (<anonymous>)
at i.findFunction (https://localhost:5001/_framework/blazor.server.js:1:465)
at E (https://localhost:5001/_framework/blazor.server.js:1:2606)
at https://localhost:5001/_framework/blazor.server.js:1:3494
at new Promise (<anonymous>)
at kt.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.server.js:1:3475)
at https://localhost:5001/_framework/blazor.server.js:1:72055
at Array.forEach (<anonymous>)
at kt._invokeClientMethod (https://localhost:5001/_framework/blazor.server.js:1:72041)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
at Plotly.Blazor.PlotlyJsInterop.NewPlot(IJSRuntime jsRuntime, DotNetObjectReference`1 objectReference)
at Plotly.Blazor.PlotlyChart.NewPlot()
at Plotly.Blazor.PlotlyChart.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
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.
Yes, i saw that message too, but I think that I can't fix it. It happens when the wwwroot folder is not copied (fast enough?). Happens with other packages too. Had to rebuild the solution.
The NuGet package should copy the content automatically to the wwwroot path.
It has been pointed out that the script is not ready 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.
This has to do with the order the scripts are loaded or the timing.
Thanks! Will add it to the README
@sean-mcl the error still occurs. When I open my website using this url: "mywebsite.com", I get the same error. The plotly scripts are not there. However, if I open the url: "mywebsite.com/chartpage", then there is no error. The plotly scripts are there.
My index.html is like this:
