Failed to resolve import when importing virtual module

Question

I am trying to write type declarations for a javascript module in typescript. I want to define interfaces using a virtual module (not sure if its the right term for it). I defined base module types without a problem, but when I want to import interfaces from declared virtual module I get an following error because there is no file for it:

[vite] Internal server error: Failed to resolve import "vuex-shared-mutations/types" from "src/stores/AuthStore.ts". Does the file exist?

I am using Vuejs with vite. Here are my type definitions for module:

// src/types/vuex-shared-mutations.d.ts
interface BaseStrategyOptions {
    key: string
}

interface BroadcastChannelStrategyOptions implements BaseStrategyOptions {

}

interface LocalStorageStrategyOptions implements BaseStrategyOptions {
    maxMessageLength: number
}

interface CreateMutationsSharerParams {
    predicate: Array<string> | Function;
    strategy?: BroadcastChannelStrategy | LocalStorageStrategy
}

declare module "vuex-shared-mutations" {
    function createMutationsSharer(params: CreateMutationsSharerParams);
    export = createMutationsSharer
}

// I get error when I try to import this module
declare module "vuex-shared-mutations/types" {
    declare class BaseMutationSharingStrategy {
        addEventListener(fn: function)
        share(data: any)
    }

    declare class LocalStorageStrategy extends BaseMutationSharingStrategy {
        constructor(options: LocalStorageStrategyOptions)
    }

    declare class BroadcastChannelStrategy extends BaseMutationSharingStrategy {
        constructor(options: BroadcastChannelStrategyOptions);
    }

    export {
        BroadcastChannelStrategyOptions,
        LocalStorageStrategyOptions,
        CreateMutationsSharerParams,

        LocalStorageStrategy,
        BroadcastChannelStrategy,
    };
}

And this is how I am trying to import said module:

// src/stores/AuthStore.ts
import Vuex from 'vuex';
import type { AccessToken } from '@/model/auth';
import createMutationsSharer from "vuex-shared-mutations"; // this line does not cause any issues
import { BroadcastChannelStrategy } from 'vuex-shared-mutations/types'; // this line throws said error

interface AuthStoreData {
  accessToken?: AccessToken,
}

const AuthStore = Vuex.createStore({
  state(): AuthStoreData {
    return {
      accessToken: undefined,
    }
  },
  mutations: {
    set(state: AuthStoreData, item: AccessToken) {
      state.accessToken = item;
      return state;
    },
    reset(state: AuthStoreData) {
      state.accessToken = undefined;
      return state;
    },
  },
  plugins: [
    createMutationsSharer({
      predicate: ["set", "reset"],
      strategy: new BroadcastChannelStrategy({ key: "auth-store-channel" })
    })
  ]
})

export default AuthStore;

For context, I am trying to define types for vuex-shared-mutations npm package. How can I solve this issue ? Or should I try a different solution for defining these parameter types ?

Answer 1

vuex-shared-mutations/types could work if it was used as:

import type ... from "vuex-shared-mutations/types"

But here it's used as regular module by using imported types at runtime as new BroadcastChannelStrategy, and /types package entry doesn't exist.

Export all types in declare module "vuex-shared-mutations". This is how it's commonly done when type definitions are provided for untyped modules, there is no need for /types.