Blazor Server项目使用Chart.js报setup未定义错误求助

问题原因分析 #

1. JS文件重复加载与覆盖：
   • 同时加载了多个Chart.js核心库（chart.js、chart.min.js、chart.mjs），重复加载会引发全局变量冲突，甚至覆盖自定义方法。
   • 自定义的chart.js（定义window.setup）被后续加载的同名files/js/chart.js覆盖，直接导致setup方法丢失。
2. 加载顺序错误：自定义脚本在Chart.js核心库之前加载，可能导致new Chart()时Chart类未初始化，后续同名文件进一步覆盖了你的setup方法。
3. 模块与非模块混用：chart.mjs是ES模块格式，和普通IIFE格式的chart.js混用会导致加载逻辑混乱，加剧方法未定义问题。

解决方法 #

1. 清理并规范JS引用 #

删除重复的Chart.js核心库，只保留一个稳定版本（推荐chart.min.js），同时重命名自定义脚本避免重名覆盖：

<!-- 先加载Chart.js核心库 -->
<script src="files/js/chart.min.js"></script>
<!-- 重命名自定义脚本为chart-setup.js，避免和核心库重名 -->
<script src="chart-setup.js"></script>
<!-- 其他依赖库按顺序加载 -->
<script src="files/js/bootstrap.min.js"></script>
<script src="files/js/jquery.slim.min.js"></script>
<script src="files/js/popper.min.js"></script>
<!-- 如需helpers，保留对应版本，注意避免模块与非模块混用 -->
<script src="files/js/helpers.esm.js"></script>

2. 验证自定义脚本加载状态 #

打开浏览器开发者工具的Network标签，确认chart-setup.js是否成功加载；在控制台输入window.setup，检查方法是否存在：

• 如果方法不存在，检查脚本路径是否正确，是否存在404错误。
• 如果路径正确但未加载，确认文件是否放在wwwroot目录下（Blazor Server的静态资源需存放于此）。

3. 优化Blazor组件逻辑 #

• 仅在首次渲染时调用setup方法，避免重复执行：

  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
      if (!firstRender) return;
  
      try
      {
          var config = new
          {
              Type = Type.ToString().ToLower(),
              Options = new
              {
                  Responsive = true
                  // 饼图不需要Y轴配置，删除Scales部分避免无效参数
              },
              Data = new
              {
                  Datasets = new[]
                  {
                      new { Data = Data, BackgroundColor = BackgroundColor }
                  },
                  Labels = Labels
              }
          };
  
          await JSRuntime.InvokeVoidAsync("setup", Id, config);
      }
      catch (Exception e)
      {
          using (StreamWriter sw = File.AppendText(Pages.CommonClass.error_path))
          {
              sw.WriteLine($"Chart.JS Error: {e}{Environment.NewLine}");
          }
      }
  }
  

• 移除饼图不需要的Scales配置，避免Chart.js抛出不必要的警告或错误。

4. 增强自定义脚本的容错性 #

修改自定义脚本，增加Chart类和DOM元素存在的判断，避免初始化失败：

window.setup = (id, config) => {
  if (typeof Chart === 'undefined') {
    console.error('Chart.js is not loaded');
    return;
  }
  const ctx = document.getElementById(id)?.getContext('2d');
  if (!ctx) {
    console.error(`Canvas element with id ${id} not found`);
    return;
  }
  new Chart(ctx, config);
};

内容的提问来源于stack exchange，提问作者Mdarende