Compatibility with asynchronous loading?

Hello there :)

As I'm working on a Quasar project I've been facing an issue while trying to use the library.

Quasar's particularity is to offer some SSR render, so I had to make a small tweak to load the component with defineAsyncComponent (as a basic import would break the server side).

Here's the simple component I've made up for basic testing:


<template>

  <q-no-ssr>

    <EmojiPicker :native="true" @select="onSelectedEmoji" />

    <template v-slot:placeholder>
      <q-skeleton height="48px" style="margin-top: 1rem; border-radius: 0.75rem;"/>
    </template>
  </q-no-ssr>

</template>

<script>
import {ref, defineComponent, defineAsyncComponent} from 'vue'

export default defineComponent({
  name: 'ChatInput',
  components: {
    EmojiPicker: defineAsyncComponent(() => import('vue3-emoji-picker'))
  },
  setup () {

    const onSelectedEmoji = (emoji) => {
      console.log(emoji)
    }
    return {
      onSelectedEmoji,
    }
  },
})
</script>
<style lang="scss">
// $
@import 'node_modules/vue3-emoji-picker/dist/style';
</style>

This is resulting in the component being "semi-rendered" as I see in HTML <picker-root type="" text=""></picker-root>, and I also have those two warnings in console :

[Vue warn]: provide() can only be used inside setup(). [Vue warn]: resolveComponent can only be used in render() or setup().

Would you have any idea about why it occurs, or how to load the component asynchronously?

I've also tried to setup a server-only boot file for Quasar like the following (but it didn't help either, giving the same result/warning):

import { boot } from 'quasar/wrappers'

export default boot(async ({ app }) => {
  const EmojiPicker = require('vue3-emoji-picker').default
  app.component('EmojiPicker', EmojiPicker)
})

Thanks in advance for any piece of help and have a great day!

delowardev / vue3-emoji-picker

Compatibility with asynchronous loading? #56