Vuejs 3 Pinia not working, Cannot read properties of undefined (reading 'startsWith')

Question

I try to use Pinia but it never works. Doesn't matter if I install it with Vite at the start of the project or if I add it later. It always write the same error. This is an example from my last project.

This is my main.js

import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import draggable from "vuedraggable";

const app = createApp(App);

app.use(createPinia());
app.component('draggable', draggable);
app.mount("#app");

This is start of my App.vue

<script setup>
import { ref } from "vue";
import draggable from "vuedraggable";
import {useCounterStore} from "./stores/counter";
const storeCounter = useCounterStore();

The error appears when I enter

const storeCounter = useCounterStore();

Menswear

Please, provide stackoverflow.com/help/mcve . What is ./stores/counter ? – Stubstad

Answer 1

I did tests in Firefox instead of Chrome and the explanation was much better. It told me I was missing "id: counter" in my counter.js in "export const counter".

Menswear

Answer 2

It is refering to the ref that is used when creating the store..

refer to the below store

import { defineStore } from 'pinia'

import { io } from 'socket.io-client'

const client = io('http://localhost:3000')
export const useMessageStore = defineStore('messageStore',{
    state: () => ({
        client: client,
        username: null,
        connected: false,
        users: 0,
        messages: [],
    }),

    actions: {
        getMessages() {
            this.client.emit('getMessages')
        },
    },
})

export const useMessageStore = defineStore('messageStore',{

the 'messageStore' part is what they mean when they say the Id...

Firing