【Nuxt】defineComponent内が実行されない

10:30

久しぶりに開いたプロジェクトをちょっと編集してyarn devしたら、@clickが動かなくなってた。
色々テストしてたら、defineComponentのmounted()も呼ばれない。

<template>
    <div>
    </div>
</template>

<script lang="ts">
console.log("Start!!");
export default defineComponent({
  mounted() {
    console.log("Mounted!!");
  },
})
</script>

これで「Mounted!!」がコンソールに表示されない。

どうしたこっちゃ。

とりあえずissuetとして出してみたけど、defineComponent内が完全に動かないなんてことあるのか?

前ビルドした時は問題なかったはずだから、久しぶりのビルドの前に変更した箇所がダメだったのかと思い、変更部分をDiscardしてyarn dev

11:25

元の状態に戻してもうまくいかない。。。
前から動いてなかったってこと?いつから???

ログに出てるこれが原因だろうか。

Failed to load resource: the server responded with a status of 504 (Outdated Optimize Dep)

dependenciesをインストールし直してもダメ

11:40

ワカラナイ

次の日 8:00

Githubで返信があり、ログはClient Sideに出るはずだということだった。私の場合はなぜかServer Sideに出ていた。

しかし今日あたらめてyarn devしたら、ちゃんと動くようになってた。
なんで!!!!
全然スッキリしない!!!!

とりあえず解決。。

9:00

と思って調子乗って実装してたら、またStartedとかがサーバー側で呼ばれるようになっちゃった!
慌ててコードを元に戻しても同じ。

一度キャッシュをクリアしてみる。

ChatGPTに頑張って質問攻めしたら、import { defineComponent } from 'vue';をちゃんとやってるか?と聞かれた。

import { defineComponent } from 'vue';を<script>の最初に追加したら正常に動いた!!!
すごい基本的なことだった。
逆になんで今日の8:00には動いたのか?

この記事が気に入ったらサポートをしてみませんか?