"platform" is undefined when using quasar components and rendering component manually

[gkovalechyn]

Hello!

I'm currently trying to setup a simple confirmation dialog composable that uses quasar components and the HTML dialog element but when I try to add any quasar elements an error is thrown saying it's not able to access the platform field.

The composable is this:

import { DeferredPromise } from "@/modules/core/DeferredPromise";
import ConfirmationDialogVue from "@/modules/core/components/ConfirmationDialog.vue";
import { h, render } from "vue";

export function useConfirmationDialog() {
	return function (title?: string, confirmText?: string, cancelText?: string) {
		const deferred = new DeferredPromise<boolean>();
		const body = document.querySelector("body")!;
		const container = body.appendChild(document.createElement("div"));
		const renderedDialog = h(ConfirmationDialogVue, {
			title,
			confirmText,
			cancelText,
			onConfirmed() {
				render(null, container);
				container.remove();
				deferred.resolve(true);
			},
			onCancelled() {
				render(null, container);
				container.remove();
				deferred.resolve(false);
			}
		});

		render(renderedDialog, container);

		if (renderedDialog.component && renderedDialog.component.exposed) {
			renderedDialog.component.exposed.open(title, confirmText, cancelText);
		}

		return deferred.getPromise();
	};
}

Which renders this component:

<template>
	<dialog ref="dialogElement" class="rounded border-0 shadow-lg">
		<div>{{ props.title }}</div>
		<QBtn />
		<button @click="emit('confirmed')">{{ props.confirmText }}</button>
		<button @click="emit('cancelled')">{{ props.cancelText }}</button>
	</dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";

const props = withDefaults(
	defineProps<{
		title?: string;
		confirmText?: string;
		cancelText?: string;
	}>(),
	{
		title: "",
		confirmText: "Confirmar",
		cancelText: "Cancelar"
	}
);
const dialogElement = ref<HTMLDialogElement>();
const emit = defineEmits<{
	(e: "confirmed"): void;
	(e: "cancelled"): void;
}>();

defineExpose({
	open: () => {
		dialogElement.value?.showModal();
	}
});
</script>

The composable is called like this:

const confirm = useConfirmationDialog();


if (await confirm("Are you sure you want to continue?")) {
	await doSomething();
}

The issue is that when the function is called it throws this error:

quasar.js?v=4f1ae809:2625 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'platform')
    at ReactiveEffect.fn (quasar.js?v=4f1ae809:2625:22)
    at ReactiveEffect.run (chunk-G4DFXOZZ.js?v=4f1ae809:423:19)
    at get value [as value] (chunk-G4DFXOZZ.js?v=4f1ae809:1383:35)
    at ReactiveEffect.fn (quasar.js?v=4f1ae809:2641:19)
    at ReactiveEffect.run (chunk-G4DFXOZZ.js?v=4f1ae809:423:19)
    at get value [as value] (chunk-G4DFXOZZ.js?v=4f1ae809:1383:35)
    at Proxy.<anonymous> (quasar.js?v=4f1ae809:2831:21)
    at renderComponentRoot (chunk-G4DFXOZZ.js?v=4f1ae809:2224:17)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-G4DFXOZZ.js?v=4f1ae809:7099:46)
    at ReactiveEffect.run (chunk-G4DFXOZZ.js?v=4f1ae809:423:19)

It refers to the following section inside the button component:

      if (isActionable.value === true) {
        const acc = {
          onClick,
          onKeydown: onKeydown2,
          onMousedown
        };
        if (proxy.$q.platform.has.touch === true) {  // HERE
          const suffix = props2.onTouchstart !== void 0 ? "" : "Passive";
          acc[`onTouchstart${suffix}`] = onTouchstart;
        }
        return acc;
      }
      return {
        // needed; especially for disabled <a> tags
        onClick: stopAndPrevent
      };
    });

I'm assuming this has something to do with the way I am rendering the component it does not have access to the vue instance. I couldn't find much information in the vue documentation since this render method seems to be used only internally.

Does anyone have any idea on how I could get this to work? The main idea is to render a simple dialog without having to insert any other components in the component that wants to display a confirmation dialog or adding other elements to my main App component.
Worst case I can just use normal elements and style them but I would like to use quasar components for this dialog.

[mrlovables]

I also encountered the same problem. Have you solved this problem?

[gkovalechyn]

Unfortunately not, I gave up on using quasar for this and switched to sweetalert2.

[Hariprabu94]

@gkovalechyn I am also facing same issue. Have you solved this problem?

[stefanvanherwijnen]

Are you using the Quasar CLI? If not, most Quasar components use some internal logic which means you can't simply import Quasar components without a build/bundler configuration (e.g. the Vite plugin).

[gkovalechyn]

I wasn't using the Quasar CLI but the Quasar plugin for Vite. I added it to my project after I had created it so that's why I used the plugin instead of the CLI.

I think that the main issue is that the render function expects this to be the vue instance but I didn't have this idea at the time so I didn't test it. I think that exporting the vue instance and then binding it to this for the render method could work.

[stefanvanherwijnen]

If you setup a repo with a minimal working example I can have a look at it. My guess it's just a configuration issue.

[gkovalechyn]

I've created this simple repo which is able to reproduce the issue: https://github.com/gkovalechyn/quasar-platform-undefined

[stefanvanherwijnen]

gkovalechyn/quasar-platform-undefined#1

[gkovalechyn]

For anyone who runs into this issue later, Stefan mentioned the Dialog plugin in the quasar docs: https://quasar.dev/quasar-plugins/dialog/ which should be used for these cases. PR for reference: gkovalechyn/quasar-platform-undefined#1