unable to import pinia store in vue 3 ts , vite 3

[AliQ80]

hello, this is a new project just tried to add pinia put I'm unable to import the store as you see this error

this is my package.json

{
  "name": "vite-starter",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "daisyui": "^2.19.0",
    "pinia": "^2.0.16",
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.0",
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.6",
    "typescript": "^4.6.4",
    "vite": "^3.0.0",
    "vue-tsc": "^0.38.4"
  }
}

this is my tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

this is my cart.ts pinia store

import { defineStore, acceptHMRUpdate } from 'pinia'

export type Item = { name: string; url: string }

export const useCartStore = defineStore({
  id: 'cart',
  state: () => ({
    items: [] as Item[],
  }),
  getters: {
    itemsCount(): number {
      return this.items.length
    },
  },
  actions: {
    addItem(item: Item) {
      this.items.push(item)
    },
    removeItem(item: Item) {
      const i = this.items.findIndex((s) => s.name === item.name)
      if (i > -1) this.items.splice(i, 1)
    },
  },
})

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useCartStore, import.meta.hot))
}

and this is my app.vue

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
import { useCartStore } from '@/stores/cart'
const cart = useCartStore()
</script>

<template>
  <h1>{{ cart }}</h1>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>

  <button class="btn btn-primary">Button</button>

  <div class="flex justify-center">
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

I also have a global.d.ts

declare module 'daisyui'

I have searched alot before asking but did not find any answer, help is appreciated, thank you

[Lilja]

You need to define an paths-alias for typescript in tsconfig.json. This has nothing to do with pinia.

https://stackoverflow.com/questions/66043612/vue3-vite-project-alias-src-to-not-working

        "paths": {
            "@/*": [
                "src/*"
            ]
        },

[AliQ80]

thank you for the reply,

I'll test it