Cannot initialise component in Vue.js 3

[appsol]

Hello,

I've used the date picker component in Vue2 before, but I'm struggling to get it to run in Vue3 compiled with Vite.

I've followed the installation instructions and have in vite.config.js:

vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
                compilerOptions: {
                    // treat all tags with a dash as custom elements
                    isCustomElement: (tag) => tag.includes("duet-"),
                },
            },
        }),

which seems the appropriate alternative to:

Vue.config.ignoredElements = [/duet-\w*/];

In app.js I have:

import { defineCustomElements } from "@duetds/date-picker/dist/loader";

defineCustomElements(window);

const appName =
    window.document.getElementsByTagName("title")[0]?.innerText || "Laravel";

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) =>
        resolvePageComponent(
            `./Pages/${name}.vue`,
            import.meta.glob("./Pages/**/*.vue")
        ),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
    progress: {
        color: "#4B5563",
    },
});

And in my component template I have:

<duet-date-picker
        :identifier="id"
        :localization.prop="localisationUk"
        :value="modelValue"
        :max="max"
        :min="min"
        :required="required"
        :date-adapter.prop="{ parse: parseDate, format: formatDate }"
        @duetChange="dateSelected"
        />

But when I'm getting errors in the console:

Loading module from “http://0.0.0.0:5173/node_modules/.vite/deps/duet-date-picker.entry.js” was blocked because of a disallowed MIME type (“”)

TypeError: error loading dynamically imported module undefined

and from InitializeComponent:

Uncaught (in promise) TypeError: a is undefined

I know this is an issue between the keyboard and the chair, but does anyone have a working install in Vue3 they can point me to?

Thanks

[o3-steven]

Loading module from “http://0.0.0.0:5173/node_modules/.vite/deps/duet-date-picker.entry.js” was blocked because of a disallowed MIME type (“”)

This is your first issue to fix. You need the correct MIME type here for this file to get imported. Looks like it would fix your undefined errors but I can't be sure

[ekamphuis82]

I think it's the same issue users from Stencil mentioned earlier: https://github.com/ionic-team/stencil/issues/3195. Getting the same error but with status 504 (Gateway Timeout) (GET http://localhost:9000/node_modules/.q-cache/vite/spa/deps/duet-date-picker.entry.js net::ERR_ABORTED 504 (Gateway Timeout).

The problem is duet-date-picker is not compatible with Vite.

[jbhoot]

@appsol

I encountered the same error

Loading module from “http://0.0.0.0:5173/node_modules/.vite/deps/duet-date-picker.entry.js” 
was blocked because of a disallowed MIME type (“”)

while moving from webpack to vitejs as my project's bundler.

I noticed that WebStorm complained (a squiggly line under the imported defineCustomElements), so I let it fix the import.

The fix changed the import from the recommended

import { defineCustomElements } from "@duetds/date-picker/dist/loader";

to

import {defineCustomElements} from '@duetds/date-picker/custom-element';

which solved the error for me.

---

Note: I am using duetds/date-picker in a React app, not a Vue app, as a custom element (in a non-React portion of the app), and as a React component.