如果我的 Blazor 应用程序中安装了 BlazorMonaco，则无法使用 Plotly.Blazor

Question

在我的 Blazor 应用程序中，我使用 Plotly.Blazor 来显示一些图表。
我最近添加了 BlazorMonaco，但添加后 -

Plotly.Blazor

停止工作。

在 DevTools 控制台中，我收到以下错误：

错误：Microsoft.JSInterop.JSException：无法读取
的属性 未定义（读取“newPlot”）类型错误：无法读取
的属性 未定义（读取“newPlot”）
在 Module.newPlot （https://localhost:5001/_content/Plotly.Blazor/plotly-interop.js:4:19）
在 https://localhost:5001/_framework/blazor.server.js:1:3244
...

探索了一下之后：

1. 如果我不引用

   Monaco's

   _content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js

   文件，

   Plotly

   工作得很好（但摩纳哥当然不会工作）。
2. 调试

   Plotly's

   js时，似乎

   window.Plotly

   未定义。

我的结论是

Monaco

可能会污染全局命名空间，但我找不到确凿的证据......
有什么建议可以解决这个问题吗？

附加信息：

• BlazorMonaco：版本

  3.2.0

• Plotly.Blazor：版本

  4.3.0

Answer 1

问题在于

importScript

中的

plotly-interop-5.4.0.js

函数与 AMD（异步模块定义）加载器冲突，例如 RequireJS，后者可能在您的 Blazor 环境中处于活动状态（例如在 Blazor.Monaco 中使用）。

Plotly 尝试将自身定义为匿名模块，但 AMD 不支持在同一脚本中进行多个匿名定义调用，因此当

onload

时，

window.Plotly

未定义，如您所见。

为了解决此问题，我提交了一个 pull request，但与此同时，您可以执行此解决方法。

如果使用 RCL 或在 index.html 中，请在单独的文件夹中创建两个 js 脚本

function disableAMD() {
    if (typeof Plotly !== "undefined") {
        return;
    }
    
    if (typeof define === 'function' && define.amd) {
        window._originalDefine = define;
        define = undefined; // Temporarily disable AMD
    }
}

function enableAMD() {
    if (window._originalDefine) {
        define = window._originalDefine; // Restore the original define function
        delete window._originalDefine;
    }
}

然后当您的表单使用 Plotly.Blazor 时，在 OnInitializedAsync() 中调用它们

protected override async Task OnInitializedAsync()
    {
        var module = await Module;
        await module.InvokeVoidAsync("disableAMD");
        await base.OnInitializedAsync();
    }

然后在关闭表单时恢复amd：

public async ValueTask DisposeAsync()
    {
        _chart?.Purge();
        var module = await Module;
        await module.InvokeVoidAsync("enableAMD");
        await module.DisposeAsync();
    }