0

Trying Vue 3 with TS & Pinia. Inside a component, everything is fine with but when I try , I'm gettings an error in VS Code: "Cannot find Module @/stores/todoList".

The same error with "import { storeToRefs } from 'pinia'" : Cannot find 'pinia'.

<script setup  lang="ts">
import { useTodoListStore } from '@/stores/todoList'
import { storeToRefs } from 'pinia'
</script>

My Store:

import { defineStore } from 'pinia'

export const useTodoListStore = defineStore("todoList", {
  state: () => ({
    todoList: [],
    id: 0
  }),
  actions: {
    addTodo(item) {
      this.todoList.push({ item, id: this.id++, completed: false })
    },
    deleteTodo(itemId) {
      this.todoList = this.todoList.filter((object) => {
        return object.id !== itemId
      })
    },
    toggleCompleted(idToFind) {
      const todo = this.todoList.find((obj) => obj.id === idToFind)
      if (todo) {
        todo.completed = !todo.completed
      }
    }
  }
})
Dustin
  • 23
  • 5

1 Answers1

0

My guess is that you don't have the project properly configured to support the use of the @ syntax. There are two ways past this: changing your configuration, or not using the @ syntax.

Method One

You can change the import to be a typical relative path import for a simple fix, just use something along the lines of the following, depending on your file's location:

import { useTodoListStore } from '../../stores/todoList'

Method Two

tsconfig

If you want to enable the use of the @ syntax, you can do it from within your tsconfig file, as described in this answer:

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

webpack

Or from within your Webpack configuration file via resolve.alias, as explained in this answer:

const path = require('path');

...
resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    ...
    '@': path.resolve('src'),
  }
},
...
Aaron Meese
  • 1,670
  • 3
  • 22
  • 32
  • Vite has some config as well. Non of this resolved the issue. Something between TS `export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } } })` – Dustin Feb 18 '23 at 21:01
  • I think it is hung up on the export const. `export const useTodoListStore` – Dustin Feb 18 '23 at 21:22