Components from the component library built with Vite + Vue2 are not detected as Vue components in the IDE

[antongospod]

Hi, I'm making a component library on Vue v.2.7.14 + Vite v.4.1.4 everything works, except for the prompts in the IDE where I'm using an already compiled package. Screenshot 1 shows how one of my library components is defined in the project where I use it. Below it shows the whole configuration of the library. It feels like Rollup is doing something wrong. As a result IDE doesn't understand that it has a Vue component in front of it. I would be very grateful for help in solving this problem, maybe I'm doing something wrong.

vite.config.js

import { resolve } from 'path';
import { defineConfig } from 'vite';
import { viteStaticCopy } from 'vite-plugin-static-copy';
import vue from '@vitejs/plugin-vue2';
import pkg from './package.json';

const projectRootDir = resolve(__dirname);
const scssGlobals = [
  '/settings/_colors.scss',
  '/settings/_variables.scss'
];
const distPath = resolve('dist');
const copyFileTargets = (files, filePath, destPath) => files.map(item => ({
  src: resolve(`${filePath}/${item}`),
  dest: destPath
}));

const config = defineConfig({
  resolve: {
    alias: {
      '@': resolve(projectRootDir, 'src')
    }
  },
  build: {
    outDir: `${distPath}/ui`,
    emptyOutDir: true,
    minify: true,
    lib: {
      entry: pkg.source,
      name: pkg.description,
      formats: ['es', 'cjs'],
      fileName: format => `index.${format}.js`
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        exports: 'named',
        assetFileNames: 'bundle.[ext]',
        globals: {
          vue: 'Vue'
        }
      }
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/scss/main.scss";'
      }
    }
  },
  plugins: [
    vue(),
    viteStaticCopy({
      targets: copyFileTargets(scssGlobals, './src/scss', 'scss')
    })
  ]
});

export default config;

./src/components/SButton/index.js

import SButton from './SButton.vue';

export { SButton };
export default SButton;

./src/index.js

export { default as SButton } from './components/SButton/SButton.vue';

./package.json

  "main": "./dist/ui/index.cjs.js",
  "module": "./dist/ui/index.es.js",
  "files": [
    "dist/*"
  ],
  "exports": {
    ".": {
      "import": "./dist/ui/index.es.js",
      "require": "./dist/ui/index.cjs.js"
    },
    "./dist/ui/bundle.css": "./dist/ui/bundle.css",
    "./dist/ui/scss/_colors.scss": "./dist/ui/scss/_colors.scss",
    "./dist/ui/scss/_variables.scss": "./dist/ui/scss/_variables.scss",
    "./dist/icons/icons.svg": "./dist/icons/icons.svg",
    "./dist/icons/gradient-icons.svg": "./dist/icons/gradient-icons.svg"
  },