Как корректно подключить к проекту на vue.js свой npm-пакет с несколькими entrypoints

Я делаю свой проект на VUE 3 версии (+TS). Некоторые служебные классы я вынес в отдельную NPM-библиотеку. Библиотека у меня собирается в несколько JS файлов (для каждого класса свой) + все ехпорты из этих файлов реэкспортируются в index.js:

import StorageService from './lib/storageService';
import TransportService from './lib/transportService';
import TokenService from './lib/tokenService';
import AuthService from './lib/authService';

const myServices = {
  StorageService,
  TransportService,
  TokenService,
  AuthService,
};

export { myServices as default, StorageService, TransportService, TokenService, AuthService };

Файл package.json у библиотеки следующий:

// ..... Выше - стандартные поля
  "type": "module",
  "files": [
    "src",
    "dist/*",
    "index.d.ts",
    "auth-service.d.ts",
    "token-service.d.ts",
    "storage-service.d.ts",
    "transport-service.d.ts"
  ],
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "type": "./dist/index.d.js"
    },
    "./authService": {
      "import": "./dist/auth-service.js",
      "type": "./dist/auth-service.d.js"
    },
    "./tokenService": {
      "import": "./dist/token-service.js",
      "type": "./dist/token-service.d.js"
    },
    "./storageService": {
      "import": "./dist/storage-service.js",
      "type": "./dist/storage-service.d.js"
    },
    "./transportService": {
      "import": "./dist/transport-service.js",
      "type": "./dist/transport-service.d.js"
    }
  },
  "main": "./dist/index.js",
  "module": "./dist/index.js"

Проблема в следующем: Я устанавливаю свой NPM-пакет. Если я импортирую классы из index.js - все работает как надо. Но если я хочу конкретный класс из соответствующего файла импортировать - получаю ошибку в WebStorm Vue: Cannot find module my-services/transportService or its corresponding type declarations.

import { TransportService } from 'my-services';
// Так работает

import TransportService from 'my-services/transportService';
// Так получаю ошибку в WebStorm: Vue: Cannot find module my-services/transportService or its corresponding type declarations.

При этом билд приложения проходит, и все работает и в первом и во втором варианте! Но во втором варианте WebStorm подсвечивает импорт красным и не понимает типы, которые приходят из импортируемого модуля (что сводит на нет типизацию typescript).

Что я не так делаю? И как вообще правильно собирать/оформлять библиотеку с несколькими entrypoints? (Я в этом новичок, а мне еще надо сделать отдельную библиотеку компонентов, и там мне совсем тоже хочется разложить общие по смыслу группы компонентов в отдельные entrypoints).

P.S. Я находил описание подобной проблемы в интернете, и там предлагают в настройках Вебшторма Typescript/VUE установить параметр Vue Service в Vue Language Server (Volar). Я так и сделал, но мне это не помогло. :(

Также я установил в файле tsconfig.json

{
  "compilerOptions": {
    "moduleResolution": "NodeNext"
  }
}

Но и это мне не помогло :(


Ответы (0 шт):