defineCustomElement error | Vite Land | Page 1

lyric radish Apr 20, 2024, 12:22 AM

#

I trying to build a vue component lib with vite, and I get this error when trying to export the components

Class constructor VueCustomElement cannot be invoked without 'new'

the entry point of the lib:

import { defineCustomElement } from "vue";
import Bar from "./MyBar.ce.vue";

const MyBar = defineCustomElement(Bar);

export { MyBar };

export function register() {
    customElements.define("my-bar", MyBar);
}

if I do now use defineCustomElement and export the component directly, it works, but I don't get import completion and props suggestions... I think to solve that I need to use the defineCustomElement but it don't work

lyric radish Apr 23, 2024, 12:44 PM

#

anyone?

simple cradle Apr 23, 2024, 4:59 PM

#

Sorry, not familiar with Vue. Is there a line/stack associated with the error?

#

What's your vite config look like?

lyric radish Apr 23, 2024, 5:55 PM

#

my vite.config:

import vue from "@vitejs/plugin-vue";
import path from "path";
import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue({
            customElement: true,
        }),
    ],
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "src"),
        },
    },
    build: {
        lib: {
            entry: path.resolve(__dirname, "lib/main.ts"),
            name: "MyLib",
            fileName: "my-lib",
        },
        rollupOptions: {
            external: ["vue"],
            output: {
                globals: {
                    vue: "Vue",
                },
            },
        },
    },
});

lyric radish Apr 23, 2024, 5:56 PM

#

simple cradle Sorry, not familiar with Vue. Is there a line/stack associated with the error?

ok, not sure, I think this is only for vue

#

I really can't get past this

simple cradle Apr 23, 2024, 6:06 PM

#

What does your index.html file look like?

lyric radish Apr 23, 2024, 7:33 PM

#

I didn't even change anything is the default vite file

#

with the div id="app"

simple cradle Apr 23, 2024, 8:05 PM

#

Sure, but I don’t know which default you mean :). Those are specific to your template or create script, however you bootstrapped your project. Can you paste it here?

#

What I’m thinking is that it might be a cache problem. Deleting node_modules/.vite might help. But it’s just a general thing to try. Couldn’t hurt.

lyric radish Apr 23, 2024, 8:44 PM

#

oh ok, I didn't know, well this is the index.html of my lib project:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>SnapUI</title>
    </head>
    <body>
        <div id="app"></div>
        <script type="module" src="/src/main.ts"></script>
    </body>
</html>

#defineCustomElement error