Webpack + Bootstrap 4.1.3 | Do not try…

Ich möchte dem ein oder anderem hier schlaflose Nächte ersparen und mich kurz halten. Ich nutze seit einiger Zeit Webpack und bin damit auch sehr zufrieden. Nur manchmal schleichen sich komische Fehler ein, die so im alten einbinden via CDN oder Source nicht vorgekommen wären.

Setup

Framework: Symfony 4.2.x
Bundler: Webpack 4.20 (webpack-encore-bundle)
Bootstrap: 4.1.3

Problem

Eigens eingebundene Files die $/jQuery benötigen funktionieren einwandfrei – nur Bootstrap (in dem Fall collapse.js) funtkionieren nicht. Importiert wurde das ganze in der app.js

require('../css/app.scss');

const $ = require('jquery');
global.$ = $;
global.jQuery = $;

import 'bootstrap';

Es kommt keine Fehlermeldung oder sonst etwas. In der app.js ist der Code der Collapse Library drin. Der Versuch das ganze mit einem CDN zu triggern bringt das gewünschte Ergebniss, ist aber nicht die Lösung (wofür Webpack wenn ich am Ende eh wieder das script-Tag nutzen muss). Also recherchieren – irgendwann komme ich also an einem Stackoverflow Beitrag vorbei der auch die Version 4.1.3 einsetzt, gleiches Problem… Hmmm mal probieren

Lösung

yarn upgrade bootstrap

Update auf Version 4.2.1 -> yarn encore dev -> funktioniert!

Lange Rede kurzer Sinn – debuggt gar nicht erst lange, sondern updated auf eine neuere Version 😉