Typeerror: $(...).Modal Is Not a Function with Bootstrap Modal

Bootstrap modal: is not a function

You have an issue in scripts order. Load them in this order:

<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- BS JavaScript -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Have fun using Bootstrap JS -->
<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

Why this? Because Bootstrap JS depends on jQuery:

Plugin dependencies

Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).

Uncaught TypeError: $(...).modal is not a function, can't manage proper order

Because you loaded JQuery thrice :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

You need to load JQuery once in a page, If you loaded JQuery more than once then you will face error, Why do I need to load jquery twice

Bootstrap : TypeError: $(...).modal is not a function

Use this.
It will work.
I have used bootstrap 3.3.5 and jquery 1.11.3

$('document').ready(function() {

  $('#btnTest').click(function() {

    $('#dummyModal').modal('show');

  });

});

body {

  background-color: #eee;

  padding-top: 40px;

  padding-bottom: 40px;

}

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width,initial-scale=1">

  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  <title>Modal Test</title>

</head>

<body>

  <div class="container">

    <button id="btnTest" class="btn btn-default">Show Modal</button>

    <div id="dummyModal" role="dialog" class="modal fade">

      <div class="modal-dialog">

        <div class="modal-content">

          <div class="modal-header">

            <button type="button" data-dismiss="modal" class="close">×</button>

            <h4 class="modal-title">Error</h4>

          </div>

          <div class="modal-body">

            <p>Quick Brown Fox Jumps Over The Lazy Dog</p>

          </div>

          <div class="modal-footer">

            <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>

          </div>

        </div>

      </div>

    </div>

  </div>

  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</body>

</html>

bootstrap modal $(...).modal is not a function

You are using jQuery.noCoflict

Here is a jsFiddle

Use

 jQuery.noConflict();
 jQuery('#myModal') ....

Please tell me if it works or not.

UPDATE

As @dashtinejad point to another thing in his comment after the no conflict:

Other parts of script which rely on $ should change to jQuery also

how fix modal is not a function in vue.js?

Here is a similar issue: Bootstrap modal: is not a function

The reason for this problem was the wrong loading order of the scripts. Try to do this in that order

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="{{ asset('js/app.js') }}" defer></script>

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

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.

Bootstrap Uncaught TypeError: $(...).modal is not a function

Instead of

$('#newsletter').modal('hide');

I think you need

$('#newsletter.modal').hide();

Or even just

$('#newsletter').hide();