onMounted is called when there is no active component instance to be associated with

[joonseolee]

like this issue #918 , it's like calling twice loading those things. then how can I solve this problem? there is two errors each setup function style. thank you for reading this comment.

you can see the versions I used

"@vue/composition-api": "^1.7.0",
"vue": "^2.7.0",

"vue-template-compiler": "^2.7.0"

<template>
  <div id="app">
    <div class="about">
    <h1>This is an about page</h1>
    <button @click="increment">Click -> {{ state.count }}</button>
  </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, onMounted } from '@vue/composition-api';
export default defineComponent({
  setup(props, context) {
    const state: { count: number; name: string } = reactive({ count: 0, name: "" });

    const increment = (): void => {
      state.count += 1;
    }

    onMounted(() => {
      console.log('step2 -> onMounted');
    })

    console.log("hi from the defineComponent");
    return { state, increment };
  }
})
</script>

[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().
hi from the defineComponent
hi from the defineComponent
[Vue warn]: The setup binding property "state" is already declared.
[Vue warn]: The setup binding property "increment" is already declared.
step2 -> onMounted

<template>
  <div id="app">
    <div class="about">
    <h1>This is an about page</h1>
    <button @click="increment">Click -> {{ state.count }}</button>
  </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, reactive, onMounted } from '@vue/composition-api';

const state = reactive({ count: 0, name: "" });

const increment = () => {
  state.count += 1;
}

onMounted(() => {
  console.log('step2 -> onMounted');
})

console.log("hi from the setup tag");
</script>

[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().
hi from the setup tag
hi from the setup tag
console.log('step2 -> onMounted');

[xiaoxiangmoe]

in vue 2.7, you shouldn't use @vue/composition-api.

[joonseolee]

@xiaoxiangmoe I tried to downgrade vue version.
But still not working 😢

[xiaoxiangmoe]

Can you give me a minimal reproductive repo？

[joonseolee]

@xiaoxiangmoe

https://github.com/joonseolee/composition-api-test

sure here you go

[xiaoxiangmoe]

It seems that you still use vue 2.7.

please change "vue": "^2.6.0" to "vue": "~2.6.0"

[joonseolee]

@xiaoxiangmoe aha! it works but script setup tag doesn't work.
so I referenced the library https://github.com/antfu/unplugin-vue2-script-setup.
Then both types of coding work properly Thank you!! 👍

[xiaoxiangmoe]

unplugin-vue2-script-setup is only support vue 2.6, also.