laravel-mix: Uncaught TypeError: $(...).modal is not a function

Laravel Mix Version: #.#.# (npm list --depth=0)

npm list --depth=0
+-- @ladjs/bootstrap-social@7.0.2 (github:niftylettuce/bootstrap-social#f7d456c7982cdd865a8ac75025a5e68b4c71c925)
+-- axios@0.17.1
+-- bootstrap@4.0.0
+-- cross-env@5.1.3
+-- font-awesome@4.7.0
+-- jquery@3.3.1
+-- laravel-mix@1.7.2
+-- lodash@4.17.4
+-- popper.js@1.13.0
`-- vue@2.5.13

Node Version (node -v):

node -v
v8.9.4

NPM Version (npm -v):

npm -v
5.6.0

OS: Windows with HomeStead ( npm / node running on the host )

Description:

Steps To Reproduce:

With a fresh laravel install i’m trying to display a bootstrap modal but i get this error :

(index):181 Uncaught TypeError: $(...).modal is not a function
    at (index):181

    $('#exampleModalCenter').modal({
        show: true
    });

I’m new to webpack / laravel-mix / … And i don’t know how to get more information. In app.js I found this :

But still doesn’t work.

php artisan --version
Laravel Framework 5.5.28

Thanks for your help.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 16 (1 by maintainers)

Most upvoted comments

Hi @Crupuk,

Bootstrap 4 no longer uses module definitions for the core JavaScript, instead, you now need to explicitly expose each static module by using the below.

const webpack = require('webpack')

mix.webpackConfig({
  plugins: [
    new webpack.ProvidePlugin({
      $               : 'jquery',
      jQuery          : 'jquery',
      'window.jQuery' : 'jquery',
      Popper          : ['popper.js', 'default'],
      Alert           : 'exports-loader?Alert!bootstrap/js/dist/alert',
      Button          : 'exports-loader?Button!bootstrap/js/dist/button',
      Carousel        : 'exports-loader?Carousel!bootstrap/js/dist/carousel',
      Collapse        : 'exports-loader?Collapse!bootstrap/js/dist/collapse',
      Dropdown        : 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
      Modal           : 'exports-loader?Modal!bootstrap/js/dist/modal',
      Popover         : 'exports-loader?Popover!bootstrap/js/dist/popover',
      Scrollspy       : 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
      Tab             : 'exports-loader?Tab!bootstrap/js/dist/tab',
      Tooltip         : "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
      Util            : 'exports-loader?Util!bootstrap/js/dist/util',
    }),
  ],
})

This could be adapted to mix.autoload but I haven’t had a chance to test it fully.

NOTE: Make sure you have the exports-loader package installed as it’s required for this to work.

Ref: https://medium.com/@estherfalayi/setting-up-webpack-for-bootstrap-4-and-font-awesome-eb276e04aaeb

cshawaus on Feb 7, 2018

jquery/dist/jquery.slimchange to jquery will work

DevinKWu on Feb 2, 2019

@cshawaus it display an error

ReferenceError: webpack is not defined
    at Object.

even when I changed it to

mix.webpackConfig(webpack => {
    return {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                Popper          : ['popper.js', 'default'],
                Alert           : 'exports-loader?Alert!bootstrap/js/dist/alert',
                Button          : 'exports-loader?Button!bootstrap/js/dist/button',
                Carousel        : 'exports-loader?Carousel!bootstrap/js/dist/carousel',
                Collapse        : 'exports-loader?Collapse!bootstrap/js/dist/collapse',
                Dropdown        : 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
                Modal           : 'exports-loader?Modal!bootstrap/js/dist/modal',
                Popover         : 'exports-loader?Popover!bootstrap/js/dist/popover',
                Scrollspy       : 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
                Tab             : 'exports-loader?Tab!bootstrap/js/dist/tab',
                Tooltip         : "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
                Util            : 'exports-loader?Util!bootstrap/js/dist/util',
            })
        ]
    };
});

it still not working, I use bootstrap 4 and I can’t load any component until now 😦

abdulrahman19 on Nov 12, 2018