Blazor应用安装BlazorMonaco后Plotly.Blazor无法使用的问题求助

算力阿峰

2026-6-23

解决Blazor中BlazorMonaco与Plotly.Blazor冲突导致Plotly无法加载的问题

核心解决方案：隔离Monaco模块加载环境

Monaco的loader.js会修改全局模块加载机制，干扰Plotly的全局变量注册。可以通过两种方式解决冲突：

方式1：用IIFE包裹Monaco加载逻辑

将Monaco的加载脚本放在立即执行函数中，避免污染全局window对象：

<script>
  (function() {
    const script = document.createElement('script');
    script.src = '_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js';
    script.onload = function() {
      require.config({ paths: { 'vs': '_content/BlazorMonaco/lib/monaco-editor/min/vs' } });
      require(['vs/editor/editor.main'], () => {
        // Monaco初始化完成后的自定义逻辑
      });
    };
    document.head.appendChild(script);
  })();
</script>

方式2：调整脚本顺序并保留Plotly全局引用

先加载Plotly并提前保存全局引用，再加载Monaco，最后恢复Plotly的全局变量：

<!-- 优先加载Plotly脚本 -->
<script src="_content/Plotly.Blazor/plotly-latest.min.js"></script>
<script>
  // 提前备份Plotly全局对象
  window.PlotlyBackup = window.Plotly;
</script>

<!-- 加载Monaco的loader -->
<script src="_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
<script>
  // 恢复Plotly全局引用
  window.Plotly = window.PlotlyBackup;
  // 初始化Monaco
  require.config({ paths: { 'vs': '_content/BlazorMonaco/lib/monaco-editor/min/vs' } });
  require(['vs/editor/editor.main']);
</script>

问题原因说明

BlazorMonaco的loader.js基于AMD模块加载器实现，会修改全局的define和require函数，甚至干扰全局对象的属性挂载逻辑。如果Plotly脚本在Monaco加载后执行，其向window注册全局变量的过程会被AMD加载器拦截，导致window.Plotly无法正常定义，最终触发newPlot调用失败的报错。