Frappe Gantt报错‘Gantt未定义’的排查与修复求助

问题 #

此前正常运行的Frappe Gantt图表，近期突然抛出Gantt not defined错误。已尝试原在线CDN链接及本地引入库，网络面板显示库已加载，但仍出现如下错误：

jira/:338 Error initializing Gantt chart: ReferenceError: Gantt is not defined
    at HTMLDocument.<anonymous> (jira/:283:21)
    at e (jquery-3.6.0.min.js:2:30038)
    at t (jquery-3.6.0.min.js:2:30340)

相关代码片段：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Frappe Gantt Chart Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.css">
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }

    #gantt {
      height: 500px;
      overflow: auto; /* Allow scrolling if needed */
    }
  </style>
</head>

<body>
  <h2>Gantt Chart Example</h2>
  <div id="gantt"></div>

  <script src="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const tasks = [
        {
          id: "Task 1",
          name: "Task 1",
          start: "2023-09-01",
          end: "2023-09-05",
          progress: 100,
        },
        {
          id: "Task 2",
          name: "Task 2",
          start: "2023-09-03",
          end: "2023-09-10",
          progress: 50,
        },
        {
          id: "Task 3",
          name: "Task 3",
          start: "2023-09-06",
          end: "2023-09-12",
          progress: 25,
        },
      ];

      const gantt = new Gantt("#gantt", tasks, {
        on_click: (task) => {
          alert(`Task: ${task.name}`);
        },
        on_date_change: (task, start, end) => {
          console.log(`Task date changed: ${task.name} from ${start} to ${end}`);
        },
      });
    });
  </script>
</body>

</html>

原因分析 #

• CDN资源版本自动升级：未指定版本的CDN链接可能拉取了Frappe Gantt的新版本，其模块导出方式变更，原全局变量Gantt不再暴露到window对象
• 加载时序问题：网络面板显示库已加载，但实际库的初始化逻辑可能晚于你的代码执行（存在异步加载的潜在延迟）
• 本地文件损坏：本地引入的库文件可能存在缺失、格式错误或版本不匹配

修复方案 #

方案1：锁定CDN版本 #

使用指定版本的CDN链接，避免自动升级到不兼容版本，示例如下：

<!-- 替换原CSS和JS链接为固定稳定版本 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frappe-gantt@1.0.0/dist/frappe-gantt.css">
<script src="https://cdn.jsdelivr.net/npm/frappe-gantt@1.0.0/dist/frappe-gantt.js"></script>

方案2：适配ES模块导出（针对新版本库） #

如果库已改为ES模块导出，调整脚本引入方式：

<script type="module">
  import Gantt from 'https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.esm.js';
  
  document.addEventListener('DOMContentLoaded', function () {
    const tasks = [
      {
        id: "Task 1",
        name: "Task 1",
        start: "2023-09-01",
        end: "2023-09-05",
        progress: 100,
      },
      {
        id: "Task 2",
        name: "Task 2",
        start: "2023-09-03",
        end: "2023-09-10",
        progress: 50,
      },
      {
        id: "Task 3",
        name: "Task 3",
        start: "2023-09-06",
        end: "2023-09-12",
        progress: 25,
      },
    ];

    const gantt = new Gantt("#gantt", tasks, {
      on_click: (task) => {
        alert(`Task: ${task.name}`);
      },
      on_date_change: (task, start, end) => {
        console.log(`Task date changed: ${task.name} from ${start} to ${end}`);
      },
    });
  });
</script>

方案3：确认全局变量名称 #

在浏览器控制台执行console.log(window)，查看是否存在FrappeGantt或其他替代全局变量，若有则调整代码：

// 假设全局变量为FrappeGantt
const gantt = new FrappeGantt("#gantt", tasks, { ... });

方案4：强制确保加载完成后执行 #

将初始化代码绑定到库脚本的onload事件，确保库完全加载后再执行：

<script src="https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.js" onload="initGantt()"></script>
<script>
  function initGantt() {
    const tasks = [
      {
        id: "Task 1",
        name: "Task 1",
        start: "2023-09-01",
        end: "2023-09-05",
        progress: 100,
      },
      {
        id: "Task 2",
        name: "Task 2",
        start: "2023-09-03",
        end: "2023-09-10",
        progress: 50,
      },
      {
        id: "Task 3",
        name: "Task 3",
        start: "2023-09-06",
        end: "2023-09-12",
        progress: 25,
      },
    ];

    const gantt = new Gantt("#gantt", tasks, {
      on_click: (task) => {
        alert(`Task: ${task.name}`);
      },
      on_date_change: (task, start, end) => {
        console.log(`Task date changed: ${task.name} from ${start} to ${end}`);
      },
    });
  }
</script>

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