Magento 2 – Mismatched anonymous define() module im Usercentrics loader.js script

Bei einem Magento 2 Store hatten wir das Problem, dass unsere Javascripte nicht funktioniert haben. Nach längerem Suchen stellte sich Usercentrics bzw. die Einbindung als Ursache heraus.

Wie äußerte sich das Problem in Magento 2?

In unserem Fall kam es zu komischen Fehlern im Bereich von Content der eigentlich hätte je User individuell geladen werden müssen (über JS) aber komischerweise es nicht wurde.

Dazu trat der Fehler nicht generell auf sondern leider auch nur sporadisch. Wir hatten dann jedoch einen User gefunden wo es sicher reproduziert werden konnte. In der Chrom Dev Console tauchte laufend dort auf

"Mismatched anonymous define() module" das brachte uns auf die Spur, dass es Usercentrics ist.

Was ist/war die Ursache?

Folgende Script wird üblicherweise im Bereich Theme Design eingebunden

<script
  id="usercentrics-cmp" 
  data-settings-id="XXX" 
  src="https://web.cmp.usercentrics.eu/ui/loader.js" 
  async
>
</script>

Die Datei loader.js versucht, ihre Logik an die Umgebung anzupassen, in die sie eingefügt wird. Das Skript erkennt, dass im Shop die globale Funktion „define“ vorhanden ist, die von RequireJS stammt, einer der wichtigsten JavaScript-Bibliotheken in Magento 2.

Das Skript versucht, die folgende Zeile auszuführen:

define(function(){return p})

RequireJS erlaubt jedoch nicht die Verwendung von "define()" und anonymen Modulen in Skripten, die per HTML anstelle der RequireJS-API hinzugefügt werden:

https://requirejs.org/docs/errors.html

Be sure to load all scripts that call define() via the RequireJS API. Do not manually code script tags in HTML to load scripts that have define() calls in them.If you manually code an HTML script tag, be sure it only includes named modules, and that an anonymous module that will have the same name as one of the modules in that file is not loaded.