Getting "[Quasar] Incorrectly defined Dialog component" on wrapped dialogs

[vandelpavel]

What happened?

I had to wrap a Dialog custom component that uses the quasar Dialog plugin, in order to pass it to the Dialog.create function.
My components are:

The main dialog component

<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card>
      <q-card-section>Hello World</q-card-section>
      <q-card-section>
        <slot />
      </q-card-section>
      <q-card-actions>
        <q-btn label="Close" @click="onDialogCancel" />
        <q-btn label="Confirm" @click="onDialogOK" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { useDialogPluginComponent } from 'quasar'

defineEmits(useDialogPluginComponent.emits)

const { dialogRef, onDialogCancel, onDialogHide, onDialogOK } =
  useDialogPluginComponent()
</script>

The wrapper of the dialog

<template>
  <delete-me v-bind="props" title="ao"> Questo funziona </delete-me>
</template>

<script setup lang="ts">
import DeleteMe from 'src/components/dialog_custom_component.vue'
</script>

And then I was opening it like that:

import DialogWrapperComponent from 'src/components/dialog_wrapper_component.vue'

 Dialog.create({
        component: DialogWrapperComponent,
      })

What did you expect to happen?

If you copy that exact code it will work with no problem.

If you add a comment in the wrapper component like so:

<template>
  <!-- THIS IS THE COMMENT THAT BREAKS EVERYTHING -->
  <delete-me v-bind="props" title="ao"> Questo funziona </delete-me>
</template>

<script setup lang="ts">
import DeleteMe from 'src/components/dialog_custom_component.vue'
</script>

the browser console will throw you a runtime error: [Quasar] Incorrectly defined Dialog component

Reproduction URL

https://codesandbox.io/p/sandbox/romantic-scooby-rwn2l4?file=%2Fsrc%2Fcomponents%2Fdialog_wrapper_component.vue%3A2%2C49

How to reproduce?

Create the 2 components by cooping the code and call the wrapper one

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Components (quasar), Plugins (quasar)

Platforms/Browsers

Chrome

Quasar info output

Operating System - Windows_NT(10.0.22621) - win32/x64
NodeJs - 16.19.1

Global packages
  NPM - 8.19.3
  yarn - 1.22.19
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.12.0 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.9.1 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.15.2 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.2.37 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.2.0
  pinia - Not installed
  vuex - Not installed
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.18.13 -- Babel compiler core.
  webpack - 5.78.0 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.11.1 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.6.4 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  @quasar/quasar-app-extension-testing-e2e-cypress - 5.1.0 -- A Quasar App Extension for Cypress e2e
  @quasar/quasar-app-extension-apollo - 2.0.0-beta.5 -- A Quasar app extension to add GraphQL support using Apollo Client.

Relevant log output

No response

Additional context

That could be caused by how props are passed through components.
It might consider the comment as a tag and for that reason props/events are blocked.
Not sure though...

[vandelpavel]

Found this issue inside VUE issues: vuejs/core#5203
Could be related

Also this line of code could be the one that skips/breaks the flow if something is inside the template

[rstoenescu]

Hi,

Due to how we are required to architect the Dialog plugin there should be only one root node (and that node should be a QDialog component). The extra comment makes the component have multiple root nodes which breaks the flow completely.

By looking at your code samples, I would recommend just using the delete-me component directly as the Dialog component.

[rstoenescu]

And should you need to insert any comments, just do them in the children nodes. Just not as root as this changes how Vue compiles your component.