Can not use store in main.js

[zettle]

Reproduction

{
  "pinia": "^2.0.9",
   "vue": "^3.2.26",
   "vue-router": "^4.0.12",
}

I define store in src/store/player.js

// src/store/player.js
import { ref } from 'vue;
import { defineStore } from 'pinia';
export const usePlayerStore = defineStore('player', function () {
  const playerName = ref('');
  return {
    playerName
  };
});

// src/main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.use(createPinia());
app.mount('#app');

and I need use store in /src/App.vue

<template>
  <router-view></router-view>
</template>
<script setup>
import {usePlayerStore} from '@/store/player.js';
</script>

Expected behavior

Actual behavior

I got an error，I don't even use usePlayerStore()

pinia.mjs?be92:1608 Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
	const pinia = createPinia()