Nutzt man Webpack oder Parcel in WordPress und bindet dort ein jQuery-Plugin ein, kommt es zu dem Problem, dass jQuery zweimal eingebunden ist, sodass es zu unerwartetem Verhalten kommt.

Wir kommt das

Bindet man ein jQuery-Plugin ein, bringt dieses jQuery als abhängigkeit mit und da Webpack / Parcel alle Abhängigkeiten mit in die kompilierte Datei einbinden, wird jQuery einmal von den eigenen Resourcen und einmal von WordPress eingebunden.

Kann man nicht einfach das jQuery von WordPress deaktivieren?

In den meisten Fällen geht das, jedoch kommt es immer wieder zu Problemen, wenn man Plugins verwendet, die sich auf jQuery verlassen. Es ist also besser zu verhindern, dass Webpack / Parcel jQuery einbinden.

Wie kann man verhindern, dass Webpack / Parcel jQuery einbinden?

Das einfachste ist, ein eigenes jQuery-Modul zu schreiben, dass alle Aufrufe an das von WordPress mitgelieferte jQuery weiterleitet. Danach verwendet das kompilierte JS das vorher eingebundene jQuery. Hierfür müssen lediglich die beiden folgenden Anpassungen am Projekt vorgenommen werden:

package.json

{
  "alias": {
    "jquery": "./jquery.js"
  }
}

jquery.js

// Diese Datei führt dazu, dass npm/yarn kein jQuery herunterlädt und mit in das Javascript einkompiliert.
// Stattdessen wird ein jQuery verwendet, dass zuvor bereits geladen wurde (von WordPress).
// Das ist nach meiner Erfahrung weniger fehleranfällig, als das jQuery von WordPress zu blockieren.

module.exports = window.jQuery;