Uncaught TypeError: $(...).modal is not a function with webpack using bootstrap in django applicatio-CodePudding

Scoured stackoverflow and played around with webpack plugin config, but still getting Uncaught TypeError: $(...).modal is not a function even when importing Bootstrap's .modal function through webpack. The imports I have tried in the file to use Bootstrap's .modal function are import 'bootstrap' and import 'bootstrap/js/dist/modal'. These imports were directly in the file that they were being used in. Every other import works except for bootstrap it seems.

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',
    }),
  ]
}

I have installed exports-loader and everything is compiling and the js is being bundled to the output without any errors.

Since I was having trouble with the source map files I had stackoverflow-ed a solution so you'll see I have added a seperate output that may not usually be there (sourceMapFilename: "[name].js.map") but it resolved the source map issue. Sadly it didn't solve the issue with .modal.

One thing I have maybe brought it down to was that somehow bootstrap isn't seeing jquery and it's not creating the .modal function since in the source code the .modal function is only created if jquery is available, despite jquery already being a dependency of Bootstrap.

My file structure on output looks like this (look below) and the file I am loading is index.bundle.js and the browser has no trouble reading it and using it for everything else except the .modal function which somehow doesn't exist.

file output

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

Not sure what is happening but hopefully someone can point out an error in my config for using bootstrap or something with not importing jquery correctly. In the file that is trying to use the bootstrap .modal function, or in the entry file, I am not importing jQuery directly, but I have tried importing it directly in the file and there is still no change in the error.

I will gladly add anymore files or information necessary. thanks, struggling freelancer

CodePudding user response：

Finally got it working!

I ditched working with the plugins and just used split chunks to load jQuery.

webpack.config.js

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',
        },
      },
    },
  },
}

This is now what my config looks like and it works like a charm.