Material Components Filter Chips einbinden

[1unitedpower]

Was ist jetzt der Fehler und wie kann ich diesen beheben? Ursache scheint ja diese Zeile zu sein.

import {MDCChipSet} from '@material/chips';

MDC ist nicht wirklich für den direkten Gebrauch im Browser gemacht, sondern wird im Idealfall über ein Build-Tool wie WebPack, Rollup oder Parcel eingebunden. Benutzt du eines dieser Tools? Falls nicht, dann würde Parcel emfpehlen, das kommt ohne komplizierte Konfiguration aus.

Außerdem ist das Paket @material/chips wohl inzwischen als deprecated eingestuft.

Mit dem folgenden JavaScript wirst du zumindest die Fehlermeldung in deinem Codepen los:

import * as MaterialChips from "https://cdn.skypack.dev/@material/chips@11.0.0";
const MDCChipSet = MaterialChips.deprecated.MDCChipSet;
const chipSetEl = document.querySelector('.mdc-chip-set');
const chipSet = new MDCChipSet(chipSetEl);

Aber das Einbinden über ein CDN ist auch nur eine Krücke.