I’m trying to add all components inside a js file like this:

import { defineCustomElement, h } from "vue";

// import vueStylesUrl from "../styles/tailwind.scss?url"; // Not working yet as not running through postprocessors
import vueStylesContent from "../styles/vue.css.scss?inline";

const filePaths = import.meta.glob("../components/**/*.ce.vue");

let moduleDefaults = new Map();
let customElementsMap = new Map();

const registerComponents = async () => {
  // ^ Check for .ce files -> then register components
  for (const [key, value] of Object.entries(filePaths)) {
    if (value.name.toLowerCase().includes(".ce.vue")) {

      let name = value.name
        .split(/[\/]/)
        .pop()
        .toLowerCase(),
        tagName = name.substr(0, name.indexOf("."));

      const module = await value();

      // Add Global Stylesheet to each component
      const coreRenderFunc = module.default.render;

      module.default.render = (...args) => {
        const originalRenderResult = coreRenderFunc(...args);

        // Inline CSS but globally injected
        const globalVueStylesInline = h('style', {}, vueStylesContent);
        originalRenderResult.children.push(globalVueStylesInline);
        return originalRenderResult;
      }

      moduleDefaults.set(name.substr(0, name.indexOf(".")), module.default);

      customElementsMap.set(
        tagName,
        defineCustomElement(moduleDefaults.get(tagName))
      );

      window.customElements.define(
        "pk-custom-" + tagName,
        customElementsMap.get(tagName)
      );
    }
  }
};

The problem is the module.default.render is undefined. Has anyone an idea what I need to adjust to get the render function?

The module normally should have a render function available.