Chart.js 3.6.0 не работает на Weebpack 5.62.1?

У меня есть проект Django. После некоторых обновлений безопасности я обновил некоторые основные зависимости. Все было исправлено и работало, за исключением Chart.js, который не загружается в Webpack. После нескольких дней напряженной работы я решил рассказать о проблеме здесь.

С самого начала уточним, что это одна критическая ошибка и одна незначительная ошибка (можно игнорировать).

charts are not loading - CRITICAL

Uncaught ReferenceError: Chart is not defined

Мое решение: Загружать Chart.js CDN перед кодом

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js"></script>

Multiple charts using same canvas - MINOR (temporary ignored)

Uncaught Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused.

Мое решение: использовать только файл js bundle

Итак, давайте рассмотрим мой код!

Следующие файлы очень большие, поэтому я постараюсь привести важные разделы. Если вам нужна дополнительная информация, дайте мне знать.

Вот мои обновления зависимостей:

# from pip (requirements.txt)
Django==3.0.7 >> 3.0.14
django-webpack-loader==0.7.0 >> 1.4.1

# from npm (package.json)
"bootstrap": "^4.5.3", >> "^5.1.3",
"chart.js": "^2.9.4", >> "^3.6.0",
"jquery": "^3.4.1", >> "^3.6.0",
"popper.js": "^1.16.0", >> "^1.16.0",
"webpack": "^4.44.2", >> "^5.62.1",
"webpack-bundle-tracker": "^0.4.3", >> "^1.4.0",
"webpack-cli": "^3.3.10" >> "^4.9.1"

Это конфиг webpack, используемый при разработке.

webpack.config.dev.js

const path = require('path');
const webpack = require('webpack');
const BundleTracker = require('webpack-bundle-tracker');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
  context: __dirname,
  mode: 'development', //production
  entry: {
    vendor: './static/js/vendor.js',
    technology_courses: './static/js/technology_courses.js',
    technology_trends: './static/js/technology_trends.js',
    style: './static/css/index.scss',
    blog_style: './static/css/puput/blog_style.scss',
  },
  output: {
    path: path.resolve('./static/webpack_bundles_dev/'),
    // // use "[name].[contenthash].js" only for production - in dev we will need to reload static
    filename: "js/[name].js",
    assetModuleFilename: 'img/[name][ext]',
    clean: true,
  },
  plugins: [
    new CleanWebpackPlugin(),
    new BundleTracker({filename: './webpack-stats-dev.json'}),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      Popper: ['popper.js', 'default']
    })
  ],
  module: {
    rules: [
      {
        // if you come across to a file ended with .css do this
        test: /\.(css|scss)$/, // support both css and scss
        use: [
          MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'], // webpack read from right to left
      },
      {
        // asset resource loader build in webpack 5
        test: /\.(ttf|eot|svg|jpg|jpeg|webp|ico|png|gif)$/,
        type: 'asset/resource'
      },
    ],
  },
  optimization: {
    minimize: true,
    runtimeChunk: 'single',
  },
};

Здесь у меня есть два холста для графиков и некоторые даты из моделей Django.

technology.html

{% load render_bundle from webpack_loader %}

{#extra code ...#}

                <div class="row">
                    <div class="col-12 mx-auto">
                        <img id="ajax-loader-trends" src="{% static 'img/ajax-loader.gif' %}" alt="loading">
                        <canvas id="chart_gt" width="600" height="200"
                                class="chartjs-render-monitor"></canvas>
                    </div>
                </div>

{#extra code ...#}

            <div class="row">
                <div class="col-lg-5 col-10 mx-auto">
                    <img id="ajax-loader-techs" src="{% static 'img/ajax-loader.gif' %}" alt="loading">
                    <canvas id="chart_techs" width="400" height="400"
                            class="chartjs-render-monitor"></canvas>
                </div>
            </div>

{#extra code ...#}

{% block extra_js %}

    <script>
        let tech_courses = "{% url 'technology_courses_api'  slug %}";
        let course_list = "{% url 'course_list' slug=slug provider='arg' %}";
        let tech_trends = "{% url 'technology_trends_api' slug %}";
        let table_legend = false;
    </script>

    {% render_bundle 'technology_trends' 'js' 'DEFAULT' %}
    {% render_bundle 'technology_courses' 'js' 'DEFAULT' %}

{% endblock extra_js %}

Ниже приведены два графика, отформатированные для Chart.js 3.6.0

technology_trends.js

technology_courses.js

В заключении у меня есть два решения, и я надеюсь найти третье в этом замечательном сообществе: