Uncaught TypeError: $(...).modal не является функцией с webpack при использовании bootstrap в приложении django

Посмотрел stackoverflow и поигрался с конфигурацией плагина webpack, но все равно получаю Uncaught TypeError: $(...).modal is not a function даже при импорте функции Bootstrap .modal через webpack. Импорты, которые я пробовал в файле для использования функции Bootstrap .modal, это import 'bootstrap' и import 'bootstrap/js/dist/modal'. Эти импорты находились непосредственно в файле, в котором они использовались. Все остальные импорты работают, кроме bootstrap, похоже.

webpack.config.js

module.exports = {
  mode: 'development',
  entry: {
    index: './objectivedeck/static/js/index.js',
    unauthed: './objectivedeck/static/js/unauthed.js'
  },
  output: {
    filename: 'main.js',
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    sourceMapFilename: "[name].js.map"
  },
  devtool: "source-map",
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      Popper: ['popper.js', 'default'],
      Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
    }),
  ]
}

Я установил exports-loader и все компилируется и js подключается к выводу без каких-либо ошибок.

Поскольку у меня были проблемы с файлами исходной карты, я нашел решение на stackoverflow, и вы увидите, что я добавил отдельный вывод, которого обычно не бывает (sourceMapFilename: "[name].js.map"), но это решило проблему с исходной картой. К сожалению, это не решило проблему с .modal.

Единственное, к чему я, возможно, свел это к тому, что каким-то образом bootstrap не видит jquery и не создает функцию .modal, поскольку в исходном коде функция .modal создается только при наличии jquery, несмотря на то, что jquery уже является зависимостью Bootstrap.

Моя файловая структура на выходе выглядит так (смотрите ниже), а файл, который я загружаю - index.bundle.js, и браузер без проблем читает его и использует для всего остального, кроме функции .modal, которая почему-то не существует.

файл вывода

/dist
--index.bundle.js
--index.js.map

Не уверен, что происходит, но надеюсь, кто-то может указать на ошибку в моей конфигурации для использования bootstrap или что-то с неправильным импортом jquery. В файле, который пытается использовать функцию bootstrap .modal, или в файле записи, я не импортирую jQuery напрямую, но я пробовал импортировать его прямо в файл, и все еще нет изменений в ошибке.

Я с удовольствием добавлю любые необходимые файлы или информацию. спасибо, борющийся фрилансер

const path = require('path')
const webpack = require('webpack')

module.exports = {
  mode: 'development',
  entry: {
    index: './objectivedeck/static/js/index.js',
    unauthed: './objectivedeck/static/js/unauthed.js'
  },
  output: {
    filename: 'main.js',
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    sourceMapFilename: "[name].js.map"
  },
  devtool: "source-map",
  // plugins: [
  //   new webpack.ProvidePlugin({
  //     $: 'jquery',
  //     jQuery: 'jquery',
  //     'window.jQuery': 'jquery',
  //     Popper: ['popper.js', 'default'],
  //     Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
  //   }),
  // ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]jquery[\\/]/,
          name: 'vendor',
          chunks: 'all',
        },
      },
    },
  },
}