My current challenge involves publishing a Vue 3 component library with Vite, all written in Typescript. The issue I'm facing is that the type definitions are not being included in the package when imported into another project.
Upon importing the component, the following error message shows up:
Try `npm i --save-dev @types/repo__mypackagename` if it exists or add a new declaration (.d.ts) file containing `declare module '@repo/mypackagename';
I understand that a declaration file is needed, but how can this be achieved specifically with Vite & Vue 3?
Key sections of my package.json:
{
...
"files": [
"dist"
],
"main": "./dist/celestia-vue.umd.js",
"module": "./dist/celestia-vue.es.js",
"exports": {
".": {
"import": "./dist/celestia-vue.es.js",
"require": "./dist/celestia-vue.umd.js"
}
},
"unpkg": "./dist/celestia-vue.umd.js",
"jsdelivr": "./dist/celestia-vue.umd.js",
"scripts": {
"vite:dev": "vite",
"serve": "vue-cli-service serve",
"vite:serve": "vite preview",
"build": "vue-cli-service build",
"vite:build": "vue-tsc --noEmit && vite build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint"
},
...
}
The tsconfig.json configuration:
{
"compilerOptions": {
...
},
...
}
In addition to the vite.config.ts code:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import typescript from '@rollup/plugin-typescript';
...
export default defineConfig({
plugins: [
...
],
resolve: {
alias: {
...
},
},
build: {
lib: {
...
},
rollupOptions: {
...
}
}
})
The build output lands in the dist folder here:
I suspect there might be a simple oversight either in the vite.config.ts file or elsewhere in my setup.
For context, here is how my Vue 3 component library is structured: