1

I tried to use Bootstrap 4's Collapse with Webpack, but the browser gives me the following error:

jquery__WEBPACK_IMPORTED_MODULE_0___default(...)(...).collapse is not a function

The JS file is this:

import $ from 'jquery';
import '@popperjs/core';
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';    

$(function ()
{
    $('.collapse').collapse();
});

Webpack's transpilation is ok, but when I hit the page the browser's console shows the error above. Apparently, Webpack is not loading the Collapse plugin into the jQuery object, but I can't figure out why. I also tried to import the plugin individually, but the outcome is the same.

eXe
  • 186
  • 2
  • 8
  • wild guess . https://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack may be similar and w lots of details on number of options – Robert Rowntree Feb 15 '21 at 05:18
  • Thanks for your reply. I removed the error by aliasing jquery to src instead of dist (which solves the question). But now collapsible elements don't collapse unless I explicitly call 'collapse' function, as if they were not initialized at load time. Any idea why this happens? – eXe Feb 16 '21 at 02:59
  • alias to src means reliance on "unbuilt" modules whereas the entire idea of a bundler like ( webpack ) is to resolve everything ( globals, imports, requires ... all loaders ) in build && dist and to then use those at runtime . diff story if webpack-dev-server is being used but the logic still would apply. – Robert Rowntree Feb 16 '21 at 07:41
  • I see. Maybe I'm mistaken, but the answer at the link you provided suggests to use alias to src because that way Webpack can optimize dependencies better. But regardless of that, Bootstrap's collapse is not loaded if I don't alias jquery to src. – eXe Feb 17 '21 at 03:40
  • sorry then , i was mistaken if you got something from the first link that is progress – Robert Rowntree Feb 17 '21 at 04:54
  • No problem, your help was very useful. Thank you. – eXe Feb 18 '21 at 03:23

0 Answers0