Chart.js - Moment.js не может быть найден! Вы должны включить его до Chart.js, чтобы использовать шкалу времени

Question

Я пытаюсь отобразить график, который показывает данные за последние 30 дней. Диаграмма работает при запуске с моим сервером разработки веб-пакетов. Однако, это терпит неудачу, когда я собираю его (npm run build) Выдает ошибку:

("Chart.js - Moment.js не найден! Вы должны включить его до Chart.js использовать шкалу времени. Скачать на https://momentjs.com")

Я проверил каждое возможное решение, которое смог найти в Google, и ни одно из них, похоже, не решило проблему. Я включил moment.js по запросу, но это приводит к появлению множества новых ошибок, главным из которых является окно, которое не определено в moment.js. Также следует отметить, что при проверке элемента в браузере эта ошибка показывает:

Запрос на перекрестное происхождение заблокирован: одна и та же политика происхождения запрещает чтение удаленный ресурс на http://internal -server: 5000 / API / service_info / тт Тяжесть = 2 . (Причина: отсутствует заголовок CORS ‘Access-Control-Allow-Origin’).

Не думаю, что это является причиной, потому что я успешно выполняю GET-запросы к другим API-интерфейсам на сервере, и они не выдают эту ошибку. Что еще более важно, CORS включен. Соответствующий фрагмент кода приведен ниже.

Спасибо

let ctx = document.getElementById("canvas");
        this.chart = new Chart(ctx, {
          type: 'line',
          data: {
            labels: all_dates,
            datasets: [
              {
                data: cummulative_sums,
                borderColor: '#3cba9f',
                fill: false,
                label: 'Failures in past 30 days'
              },
              {
                data: comparison_cummulative_sums,
                borderColor: '#ce5fc3',
                fill: false,
                label: 'Failures 30 days prior'
              }
            ]
          },
          options: {
            legend: {
              display: true
            },
            scales: {
              xAxes: [{
                display: true
              }],
              yAxes: [{
                display: true
              }],
            }
          }
        });

Answer 1

Chart.js имеет следующие две версии:

Автономная сборка

Файлы:

dist/Chart.js
dist/Chart.min.js

Buildled Build

Файлы:

dist/Chart.bundle.js
dist/Chart.bundle.min.js

Автономная сборка не включает в себя moment.js, и вы должны включить ее, но в комплектную сборку входит moment.js.

Добавление в комплекте версии будет включать и решить проблему:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>

Answer 2

Может быть, вы можете удалить package-lock.json и снова выполнить установку npm, затем собрать заново и посмотреть, существует ли проблема.

Answer 3

Возможно, попробуйте yarn add вместо npm install. Ваша проблема напоминает мне похожую проблему, которая, вероятно, была решена таким образом IIRC.

Answer 4

Одним из способов решения проблемы CORS является запрос данных на стороне клиента в виде дополненного JSON. Вот пакет npm для этого: https://www.npmjs.com/package/fetch-jsonp

Он вернет ваши данные в качестве обещания, а затем вам нужно просто вызвать .json (), чтобы вернуть JSON без заполнения:

fetchJsonp('http://internal-address:5000/api/service_info/tt?severity=2')
.then(data => data.json())
.then(data => console.log(data))

Звучит так, будто это может быть бинтом, но на данный момент это может вас отвязать.