Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

State:
Created 6 years ago
Comments:15 (1 by maintainers)

Top GitHub Comments

6reactions

cshawauscommented, Feb 7, 2018

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

1reaction

DevinKWucommented, Feb 2, 2019

jquery/dist/jquery.slimchange to jquery will work