Vue: The inferred type of this node exceeds the maximum length the compiler will serialize. An explicit type annotation is needed.

[stephane303]

I am running into this error on a brand new project in vue3.
"typescript": "~5.4.0",
"pinia": "^2.1.7",
"vue": "^3.4.21"

And I am getting this error from Typescript:
Vue: The inferred type of this node exceeds the maximum length the compiler will serialize. An explicit type annotation is needed.

I only manage to get rid of it defining a State type, is there another way ?

interface NotificationsState {
    latestNotifications: V4_Bo_Notifications[];
    bellMenuOpen: boolean;
}

export const useNotificationsStore = defineStore({
    id: "notifications",
    state: () => ({
        latestNotifications: [] as Array<V4_Bo_Notifications>,
        bellMenuOpen: false
    }),
    getters: {
        getLatestNotifications(state: NotificationsState): V4_Bo_Notifications[] {
            return state.latestNotifications;
        },
        getUnreadNotifications(state: NotificationsState): Array<V4_Bo_Notifications> {
            // filter read notifications
            const unreadNotifications = [] as Array<V4_Bo_Notifications>;
            state.latestNotifications.forEach((notification) => {
                if (notification.v4_bo_notification_read_messages.length == 0) {
                    unreadNotifications.push(notification);
                }
            });
            return unreadNotifications;
        }
    },
`

[ExistentialAlex]

Have run into this same issue. I don't think there's another way unfortunately. But I think defining the type (although adding a small amount of work) helps the TS language server out.

[stephane303]

@ExistentialAlex it's not the work the problem, the problem is the duplication of code. If wish there was a way to get rid of this problem.
@posva any recommendation to solve this ?

[Gabrielr47]

also happening to me, any solution?

[stephane303]

"I only manage to get rid of it defining a State type", look at the example

[Gabrielr47]

that's also how I solved but I think it could be solved in a better way idk increasing this compiler length

[stephane303]

@Gabrielr47 yes that would be nice, but I don't think it's possible to change it or am I wrong ?

[Deckluhm]

Is there a way for you to provide a real reproduction please?

In general, Vue works better with TS when using Composition API (instead of Options API) so that's something you can try since Pinia stores can also be declared using Composition API: https://pinia.vuejs.org/core-concepts#Setup-Stores

I remember dealing with a similar situation where a Options API Vue component needed explicit type annotation to work correctly. Migrating the component to Composition API "fixed" this as the compiler was able to infer the type on his own.