Js Fehlermeldung im Backend Failed to execute 'createElement' on 'Document':

Hallo liebe Community,

Nach Livegang haben wir im Backend folgenden fehler:
DOMException: Failed to execute ‚createElement‘ on ‚Document‘: The tag name provided (‚icons-#AEC4DA‘) is not a valid name.
vendors-node.js

Das ganze tritt auf wenn man in der Suche oben, links auf den Button klickt (zb. Produkte oder Kategorie etc.)

Hat jemand eine Idee

Wir konnten die Ursache nun endlich ausfindig machen.
Das Plugin FAQs für Produkte - Premium war daran schuld.
Wir haben den Entwickler die Info gegeben und den entsprechenden Codeteil im Plugin bei uns einkommentiert. Jetzt läuft alles
Die FAQ tauchen jetzt nur im Backend in der Suche nicht auf. Stört uns aber nicht.

Hallo,
Wir haben das exakt gleiche Problem (DOMException: Failed to execute ‚createElement‘ on ‚Document‘: The tag name provided (‚icons-#AEC4DA‘) is not a valid name.), wir nutzen jedoch nicht das genannte Plugin.

Könnten Sie eventuell weiter helfen auf welche weise Sie das problematische Plugin identifiziert haben und welche Art von Code das Problem ausgelöst hat?
Das würde uns sehr bei der eigenen Suche nach dem Problem weiter helfen.

Vielen Dank im vorraus!

Hab die Nachricht erst jetzt gesehen.

Rausgefunden haben wir es indem wir einzeln Plugins kurz aktiviert bzw. deaktiviert haben.
Ursache im Plugin selbst ist das dieses Plugin ein neues Feld bei der Suche im Backend einfügt.

image

Im Plugin haben wir dann die Stellen wo die Suche eingesetzt wird auskommentiert.

Hi,

gibt es mehr Infos was da genau das Problem war? Hab grade das gleiche, aber ohne irgendwelche anderen Plugins…

Ich stehe z.Z. vor dem selben Problem.

Shopware V 6.4.18.0

Ich stehe z.Z. vor dem selben Problem.
Folgendes konnte ich aber schon herausfinden.

Anlegen eines addServiceProviderDecorator in der main.js.

Diese habe ich laut SW Doku „Add custom data to the search“ eingebunden.

const { Application } = Shopware;
Application.addServiceProviderDecorator(
  'searchTypeService',
  (searchTypeService) => {
    searchTypeService.upsertType('my_test', {
      entityName: 'my_test',
      entityService: 'myTestService',
      placeholderSnippet: 'snippet.general.menuItemLabel',
      listingRoute: 'service.list'
    });
    return searchTypeService;
  }

Das zugehörige Snippet

Snippet: de_DE.json
{
	"snippet": {
		"general": {
			"menuItemLabel": "Test",
			"menuItemColor": "#189eff",
			"menuIconName": "avatar"  
		}	
    }
}	

In der sw-search-bar/index.js unter
„vendor\shopware\administration\Resources\app\administration\src\app\component\structure\sw-search-bar“ bin ich dann fündig geworden woher die Color „#AEC4DA“ stammt.

getEntityIconColor(entityName) {
	const module = this.moduleFactory.getModuleByEntityName(entityName);

	if (!module) {
		return '#AEC4DA';
	}

	return module.manifest.color || '#AEC4DA';
},

getEntityIcon(entityName) {
	const module = this.moduleFactory.getModuleByEntityName(entityName);
	const defaultColor = '#AEC4DA';

	if (!module) {
		return defaultColor;
	}

	return module.manifest.icon || defaultColor;
},

Aus diesem Grund habe ich in der main.js folgende Ergänzungen eingefügt:

  entityIconColor: 'snippet.general.menuItemColor',
  entityIconName: 'snippet.general.menuIconName',

Leider ohne Erfolg.

Noch nicht herausgefunden habe ich woher der Anfang des tags „icons-“ kommt.

Ich hoffe sehr das mir jemand bei meinem Problem helfen kann.

Hallo,
ich bin nun ein kleines bisschen schlauer aber nicht am Ziel.

Habe festgestellt das beim erstellen des „module filters conatiner“ in der sw-search-bar.htnl.twig
der type.entityName ‚‘ (leer) ist.

{% block sw_search_bar_types_module_filters_container %}
	.
	.
	.
	
	<div
		v-for="(type, index) in typeSelectResults"
		:key="index"
		class="sw-search-bar__type-item"
		:class="{ 'is--active': activeTypeListIndex === index }"
		@mouseenter="onMouseEnterSearchType(index)"
		@click="onClickType(type.entityName)"
	>
		<span
			class="sw-search-bar__type-item-name"
		>
			<sw-icon
				class="sw-search-bar__type-item-icon"
				:style="{ 'color': getEntityIconColor(type.entityName) }"
				:name="type.entityName ? getEntityIcon(type.entityName) : 'regular-circle'"
			/>
			{{ type.entityName ? getLabelSearchType(type.entityName) : $tc('global.sw-search-bar.searchTypeAll') }}
		</span>
	</div>
	
	.
	.
	.
{% endblock %}

Aus diesem Grund wird bei „getLabelSearchType()“ kein Modul gefunden und die Methode „getEntityIcon(entityName)“ wirft die „defaultColor“ zurück.

Nun sind es zwei Probleme:

  1. Wieso hat mein „searchTypeService“ kein entityName?
  2. Wieso wirft die Methode getEntityIcon(entiyName) eine defaultColor zurück anstatt ein defaultIcon?

Hoffe immer noch darauf das mir jemand bei diesem Problem helfen kann.
Bis auf die Suche funktioniert alles

Ich bin auch auf das Problem gestoßen und habe das daher etwas genauer analysiert.
Auftreten tut das Problem nur dann, wenn der Search Type kein zugeordnetes Modul hat (siehe letzter Punkt ganz unten in der Doku: Add custom data to the search - Shopware Developer).
Ich halte jedoch das Verhalten für einen Fehler in Shopware, denn die Methode getEntityIcon() sollte auch ein Icon und keine Farbe zurückgegeben. Ich habe daher mal ein Ticket angelegt, gerne upvoten: Shopware Issuetracker