Cannot set property of undefined, on all method

I’m currently a beginner to intermediate with JavaScript, and I’m trying to get used to intermediate JavaScript for development with template literals. I worked on a class to handle the heavy lifting of defining the template, but after many try, I’m still stuck on the same error.

Cannot set property of undefined

on all my method, and frankly have no idea why it act this way

default async function TemplateElement(
    container,
    innerhtml,
    css = { fetchUrl: null, customCss: null },
    json = { fetchUrl: null, data: null },
    event = [{ type: null, selector: null, action: null }]
) {

    if (!container || typeof container !== "string") {
        throw new Error("Le conteneur doit être un nom de balise HTML valide ou un élément.");
    }
    if (typeof innerhtml !== "string") {
        throw new Error("innerhtml doit être une chaîne de caractères valide.");
    }

    this.template = {
        innerhtml: innerhtml || "",
        Json: json,
        container: container || "div",
        Css: css,
        event: event,
    };

    await this.applyCss();
    return this.contentHandler();
}

TemplateElement.prototype.applyCss = Object.freeze(async function () {
    function newStyle(data, id = null) {
        if (id && document.getElementById(id)) return;
        
        const style = document.createElement("style");
        if (id) style.id = id;
        style.innerText = data;
        style.type = "text/css";
        document.head.appendChild(style);
    }

    if (this.template.Css) {
        if (this.template.Css.fetchUrl) {
            try {
                const response = await fetch(this.template.Css.fetchUrl);
                const data = await response.text();
                newStyle(data, 'fetched-style'); // Assigner un ID pour le CSS récupéré
            } catch (error) {
                console.error("Échec de la récupération du CSS :", error);
            }
        }
        if (this.template.Css.customCss) {
            newStyle(this.template.Css.customCss, 'custom-style'); // Assigner un ID pour le CSS personnalisé
        }
    }
});

TemplateElement.prototype.content = Object.freeze(function (data = {}) {
    const template = document.createElement(this.template.container);
    template.innerHTML = this.template.innerhtml;

    if (this.template.event) {
        this.eventHandler(template);
    }

    return template; // Élément HTML
});

TemplateElement.prototype.contentHandler = Object.freeze(async function () {
    let data = this.template.Json.data || {};

    if (this.template.Json.fetchUrl) {
        try {
            const response = await fetch(this.template.Json.fetchUrl);
            const fetchedData = await response.json();
            data = { ...data, ...fetchedData }; // Fusionner les données récupérées avec les données existantes
        } catch (error) {
            console.error("Erreur :", error);
        }
    }
    
    return this.content(data);
});

TemplateElement.prototype.eventHandler = Object.freeze(function (target) {
    const listenTo = [...new Set(this.template.event.map(event => event.type))];

    listenTo.forEach(eventType => {
        target.addEventListener(eventType, (e) => {
            this.locateChild(e.target, e.type); // Localiser l'élément d'événement et le type d'événement
        });
    });
});

TemplateElement.prototype.locateChild = Object.freeze(function (interactedWith, eventType) {
    this.template.event.forEach(({ type, selector, action }) => {
        if (type === eventType && interactedWith.matches(selector)) {
            action(); 
        }
    });
});