Unable to run frappe-gantt in my Django project

I develop a Django app that will display gantt projects graph and I came to frappe-gantt, an open source librairy (https://github.com/frappe/gantt/tree/master) that is exactly what I am looking for. But, I have an error when trying to run the simple example: Uncaught TypeError: t is undefined.

Librairy seems to be correctly loaded as HTTP responses return 200 and console.log(typeof Gantt); return "function". Gantt function target a DOM element that currently exist.

I did not find any answer in SO. To notice that when loaded, frappe-gantt.umd.js header Content-Type is text/plain instead of "application/json" that maybe could explain?

Thanks for your help

{% load static %}
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
    
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
    <link rel="stylesheet" href="{% static 'dist/frappe-gantt.css' %}">
    <script src="{% static 'dist/frappe-gantt.umd.js' %}"></script>
    

  </head>
  <body>
  <section class="section">
    <div class="container">
        <div class="columns">
            <div class="column is-2">
                <div class="aside">
                
                    <h3 class="menu-label">Projects</h3>
                    
                    <hr>
                
                    <ul class="menu-list">
                        {%for p in projects %}
                            {% if p.tasks.count > 0 %}
                                <li> 
                                    <a {% if p.id == id|add:0 %} class="is-active" {%endif%} href="?id={{p.id}}">
                                    {{p.name}}
                                    </a>
                                </li>
                            {% endif %}
                        {% endfor %}
                    </ul>
                    <hr>
                    <h3 class="menu-label">Options</h3>
                    <ul class="menu-list">
                        <li>
                                <a target='_blank' href="/admin">admin</a>
                        </li>
                    </ul>
                </div>
            </div>  
            {% if tasks_count %}
            <div class="column is-10">
               

                <div class="tabs  is-centered is-toggle">
                    <ul>
                        <li  class="change">
                            <a onclick="change(this)">Day</a>
                        </li>
                        <li  class="change">
                            <a onclick="change(this)">Week</a>
                        </li>
                        <li  class="change">
                            <a onclick="change(this)">Month</a>
                        </li>
                    </ul>
                    <ul class="tabs is-small">
                   
                        <li class="">
                            <a  href="{% url 'admin:tasks_task_changelist' %}?project__id__exact={{id}}">
                                <span class="icon is-small"><i class="fas fa-edit" aria-hidden="true"></i></span>
                            Edit</a>
                        </li>
                    </ul>
                </div>
                  <div id="gantt" class="gantt-target dark"></div>
            </div>
            {% endif %}
        </div>
   </div>
  </section>
   
  <script>
        var tasks = [
        {
            id: 'Task 1',
            name: 'Redesign website',
            start: '2016-12-28',
            end: '2016-12-31',
            progress: 20,
            dependencies: 'Task 2, Task 3',
            custom_class: 'bar-milestone' // optional
        },
        
        ]
        var mygantt = new Gantt("#gantt", tasks);
  </script>
  
  </body>
</html>
Back to Top