v-close-popup directive doesn't work within quasar vite-plugin externalized libraries

[lunarchives]

What happened?

We are developing a standalone component library for our application that is effectively wrapper components around quasar components which will be used in our set of applications.

What we have discovered is that when Vite is bundling quasar into the library's output build artifacts, there are files that the quasar library uses to track internal caches of "portal" objects so that v-close-popup can look through said cache and close a given portal.

However, because the caches are not designed in a way to come from a separate package, it seems that module resolution across the component library and the app using the library end up with different caches when resolving the paths of these files. Specifically, the in-memory cache used here named portalProxyList https://github.com/quasarframework/quasar/blob/dev/ui/src/utils/private.portal/portal.js#L3

Externalizing quasar in our vite config doesn't resolve the issue so we are at loss for what we could do on our end

Our vite.config.js

/// <reference types="vitest" />

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'
import tsconfigPaths from 'vite-tsconfig-paths';
import { resolve } from 'path';
import dts from 'vite-plugin-dts'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    tsconfigPaths(),
    vue({
      template: { transformAssetUrls },
    }),
    quasar({
      sassVariables: 'src/css/quasar-variables.scss'
    }),
    dts({
      outDir: "./dist/types"
    }),
  ],
  build: {
    minify: false,
    lib: {
      entry: resolve(__dirname, 'src/main.ts'),
      name: 'ZbmComponents',
      fileName: 'zbmcomponents',
    },
    rollupOptions: {
      external: ['vue', 'quasar'],
      output: {
        globals: {
          vue: 'Vue',
          quasar: 'quasar',
        },
      },
    },
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
  define: {
    __VUE_PROD_DEVTOOLS__: true,
  },
  test: {
    environment: 'jsdom',
  }
})

What did you expect to happen?

We'd expect the v-close-popup to still work if built from a separate wrapping library

Reproduction URL

https://na.com

How to reproduce?

1. Build a component library with q-dialog
2. Use in another application, and attach a v-close-popup directive to one of the q-dialog's buttons

Flavour

Vue CLI Plugin (vue-cli-plugin-quasar)

Areas

Directives (quasar)

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[github-actions[bot]]

Hi @lunarchives! 👋

It looks like you provided an invalid or unsupported reproduction URL. Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub. Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc. Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[DouglasCalora]

The problem happens with webpack as well