Lifecycle injection APIs can only be used during execution of setup()

[pluxain]

Hello,

I try to integrate the library in a Vue3/TS project mostly using the Composition API but I face some issues. First there are those warnings in the console and then when trying to use openModal to open a Component in the modal container there is an error. This is probably related to the warnings.

// App.vue
<script lang="ts">
import { defineComponent } from 'vue'
// @ts-expect-error no TS types available yet
import { container } from 'jenesius-vue-modal'
export default defineComponent({
  components: {
    WidgetContainerModal: container,
  },
})
</script>
<template>
  <div id="app">
    <router-view />
    <WidgetContainerModal />
  </div>
</template>

// Component.vue simplified
<script setup lang="ts">
// @ts-expect-error no TS types available yet
import { openModal } from 'jenesius-vue-modal'
import ExampleModal from './ExampleModal.vue'

</script>
<template>
  <div>
    <button text="Open Modal" @click="openModal(ExampleModal)">Open Modal</button>
  </div>
</template>

Here are the console warnings

[Vue warn]: onMounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.

which seems related to this

// extracted from jenesius-vue-modal.cjs.js
var script = {
  setup(){

    vue.onMounted(initialize);

  return () => {
    return vue.h(vue.TransitionGroup, {name: configuration.animation}, {
      default: () =>modalQueue.value.map(modalObject => {
        return vue.h(script$1, {component: modalObject.component, params: modalObject.params, key: modalObject.id, id: 
          modalObject.id});
    })
      })
    }
  },
  components: {WidgetContainerModalItem: script$1}
};

and probably related to useTransitionState() from the dependencies

I also have this warning

runtime-core.esm-bundler.js:6870 [Vue warn]: Invalid VNode type: Symbol(Fragment) (symbol) 
  at <TransitionGroup name="modal-list" > 
  at <WidgetModalContainer> 
  at <App>

And finally the error when I try to open the modal

jenesius-vue-modal.cjs.js:771 Modal Container not found. Put container from jenesius-vue-modal in App's template. Check documentation for more information

localhost/:1 Uncaught (in promise) Modal Container not found. Put container from jenesius-vue-modal in App's template. Check documentation for more information

I probably make something wrong but do not understand what.

Thanks for the help

[Jenesius]

@pluxain, Sorry for long support. I have not received notification Can u show ExampleModal.vue file Or send me link for project i will run it on my pc Thnx!

[Jenesius]

Hmm, i need ful code of components, that u used Its working fine, but probably there is some error in library

<template>
    <p @click = "openModal(HelloWorld)">Test</p>
    <modal-container/>
</template>

<script setup>
    import {openModal, container as ModalContainer} from "jenesius-vue-modal";
    import HelloWorld from "./components/HelloWorld";
</script>

[pluxain]

Hi @Jenesius , thanks for the support! :)

Actually I must have done something wrong somewhere else as I tried to reproduce the error on a new project (that I wanted to use as a reference here) and everything is working like a charm!

This is excellent news!