[Vue.js]Uncaught (in promise) RangeError: Maximum call stack size exceededが出た

はじめに

コンポーネント呼び出しの際に無限ループしたため、気になったのでメモとして残します。

環境

vue3
vuecli
veurouter

本文

vueファイルでコンポーネント呼び出しの際に下記のように指定すると無限ループが発生
下記が問題のコード

vue:hogehoge.vue
<script>
// @ is an alias to /src
import test from "@/components/JapanSakeMap.vue";

export default {
  name: "test",
  components: {
    test,
  },
};
</script>

import時の名称とexport default時の名称が重複していると再帰して無限ループになるようなので、
export時の名称を変更

vue:hogehoge.vue
<script>
// @ is an alias to /src
import test from "@/components/JapanSakeMap.vue";

export default {
  name: "testtest", //変更箇所
  components: {
    test,
  },
};
</script>

これで以上です。
import時とexport時は名称はしっかり分けなきゃダメだよってだけのお話