Vue.js project error: Variable cannot be accessed before initialization

Question

I'm currently developing a Twitter clone using Vue 3. The source code for the same can be found here.

HomeView.vueThe code is as follows:

<code><template>
  <div class="home">
    <Tweet
      v-for="tweet in tweets"
      :key="tweet._id"
      :tweet="tweet" />
  </div>
</template>

<script>
import { ref } from 'vue';
import Tweet from '../components/Tweet';
import tweets from '../tweets';

export default {
  setup () {
    const tweets = ref(tweets);

    return {
      tweets,
      Tweet
    }
  }
}
</script>
</code>

But after performing the same operation, I am getting the following error in the developer's console.

Uncaught (in promise) ReferenceError: Cannot access 'tweets' before initialization

Answer 1

Not a composition API expert, but I wanted to take a look at the lifecycle, you can't use tweets directly like this because they are not usable directly. They will then be filled.

Although your template is synchronized, it will error because it cannot access something when it is (originally) undefined.

Making

may be a solution, otherwise it may be with watch and suspense, not sure.

PS: There are 2 more tweets variables here, which may cause some errors, please be careful.