Maintain same file structure in Vite library mode with lang="ts"

[dbzx10299]

I have a project setup for a component library and I am having some issues getting the file structure to stay the same as it is in the lib folder when I have <script setup lang="ts">.

I have the following tsconfig.json files.

tsconfig.json

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.lib.json" },
    { "path": "./tsconfig.node.json" }
  ]
}

tsconfig.lib.json

{
  "extends": "./tsconfig.app.json",
  "include": ["lib/**/*.ts", "lib/**/*.vue"]
}

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { libInjectCss } from 'vite-plugin-lib-inject-css'
import { resolve } from 'path'
import { globSync } from 'glob'
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import dts from 'vite-plugin-dts'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    libInjectCss(),
    dts({ tsconfigPath: resolve(__dirname, "tsconfig.lib.json") })
  ],
  build: {
    copyPublicDir: false,
    lib: {
      entry: resolve(__dirname, 'lib/main.ts'),
      formats: ['es']
    },
    rollupOptions: {
      external: ['vue'],
      input: Object.fromEntries(
        globSync('lib/**/*.{ts,vue}', {
          ignore: ['lib/**/*.d.ts']
        }).map(file => [
          path.relative(
            'lib',
            file.slice(0, file.length - path.extname(file).length)
          ),
          fileURLToPath(new URL(file, import.meta.url))
        ])
      ),
      output: {
        assetFileNames: 'assets/[name][extname]',
        entryFileNames: '[name].js'
      }
    }
  }
})

package.json

{
  "name": "testtest",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@types/node": "^22.10.2",
    "@vitejs/plugin-vue": "^5.2.1",
    "@vue/tsconfig": "^0.7.0",
    "glob": "^11.0.0",
    "typescript": "~5.6.2",
    "vite": "^6.0.5",
    "vite-plugin-dts": "^4.4.0",
    "vite-plugin-lib-inject-css": "^2.1.1",
    "vue-tsc": "^2.2.0"
  },
  "main": "./dist/main.js",
  "files": [
    "dist"
  ],
  "exports": {
    ".": {
      "import": "./dist/main.js"
    }
  },
  "sideEffects": [
    "**/*.css"
  ]
}

This is the folder structure that I have and I want this to end up in /dist after running npm run build.

.
└── lib/
    ├── components/
    │   └── Button/
    │       ├── index.js
    │       └── styles.module.css
    └── main.ts

What I actually get is this and I don't know where index.vue_vue_type_script_setup_true_lang-Bvhkb65H.js is coming from. Also if I were to do the same thing in Vite with a React project, I would get the same file structure in dist as lib.

.
└── dist/
    ├── assets/
    │   └── index.css
    ├── components/
    │   └── Button/
    │       ├── index.js
    │       └── index.vue.d.ts
    ├── index.vue_vue_type_script_setup_true_lang-Bvhkb65H.js
    ├── main.d.ts
    └── main.ts

What can be done so that the output in /dist is

.
└── dist/
    ├── assets/
    │   └── index.css
    ├── components/
    │   └── Button/
    │       ├── index.js
    │       └── index.vue.d.ts
    ├── main.d.ts
    └── main.ts

[oleksandr-danylchenko]

I believe that the Vue is not externalized¹. I'd recommend using the vite-plugin-externalize-deps plugin to automate the externalization process.

Footnotes

1. "Make sure to also externalize any dependencies that you do not want to bundle into your library, e.g. vue or react", see ↩

[dbzx10299]

If you look at my original code, vue is externalized already in rollupOptions

[oleksandr-danylchenko]

Sorry, I overlooked the external: ['vue'].
What did the index.vue_vue_type_script_setup_true_lang-Bvhkb65H.js contain?

[oleksandr-danylchenko]

I had an issue with the transitive dependencies or the sub-path imports not being externalized. So I needed to explicitly externalize them using the plugin:

externalizeDeps({
	include: [/^react(\/.*)?/, /emotion/, /^@annotorious(\/.*)?/, /^@recogito(\/.*)?/]
})