Trying to enqueue lit-html in my wordpress site using a cdn but I get Uncaught TypeError

Question

Hi guys im trying to enqueue lit-html in my wordpress website by adding this to the php:

function my_theme_enqueue_scripts() {
    wp_enqueue_script('lit-html-js', 'https://cdn.jsdelivr.net/npm/[email protected]/lit-html.min.js', array(), '3.1.2', true);
}

add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

function add_type_attribute($tag, $handle, $src) {
    // Only add the module type attribute to your specific handle
    if ('lit-html-js' === $handle) {
        $tag = '<script type="module" src="' . esc_url($src) . '"></script>';
    }
    return $tag;
}

add_filter('script_loader_tag', 'add_type_attribute', 10, 3);

and then I do this in an html block of the wp bakery builder:

<script type = "module">
import { html, render } from 'lit-html';

    async function getCategories() {
        try {
            const response = await fetch('https://zanixa3.merchsolution.net/wp-json/wp/v2/categories');
            if (!response.ok) {
                throw new Error('Failed to retrieve categories');
            }
            const categories = await response.json();

            // Process categories to find top-level categories and their subcategories
            const processedCategories = categories.map(category => ({
                ...category,
                subcategories: categories.filter(sub => sub.parent === category.id)
            })).filter(category => category.parent === 0);

            // Render the categories
            render(renderCategories(processedCategories), document.getElementById("categories-tabs-za"));
        } catch (error) {
            console.error('Error:', error);
        }
    }

    const renderCategories = (categories) => html`
        <div>
            ${categories.map(category => html`
                <div>
                    <button @click="${() => toggleSubcategories(category.id)}">${category.name}</button>
                    ${category.subcategories && category.subcategories.length > 0 ? html`
                        <div id="subcategories-${category.id}" style="display: none;">
                            ${category.subcategories.map(subcategory => html`
                                <button>${subcategory.name}</button>
                            `)}
                        </div>
                    ` : ''}
                </div>
            `)}
        </div>
    `;

    function toggleSubcategories(categoryId) {
        const subcategoriesElement = document.querySelector(`#subcategories-${categoryId}`);
        if (subcategoriesElement) {
            subcategoriesElement.style.display = subcategoriesElement.style.display === 'none' ? 'block' : 'none';
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        getCategories();
    });
</script>

and i get this error in the console: Uncaught TypeError: Failed to resolve module specifier "lit-html". Relative references must start with either "/", "./", or "../". why is that...?

I tried different ways of enqueueing it but it still doesn't work, I used to be able to fix this but I forgot how it was done...