Following your exact tutorial on how to create this.
When importing the component into a new project i get the error that there is no declaration file found.
Could not find a declaration file for module 'blocks-ui'. '/blocks-ui/dist/blocks-ui.umd.js' implicitly has an 'any' type. Try `npm i --save-dev @types/blocks-ui` if it exists or add a new declaration (.d.ts) file containing `declare module 'blocks-ui';`
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"moduleResolution": "Node",
"strict": true,
"jsx": "preserve",
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["ESNext", "DOM"],
"skipLibCheck": true,
"noEmit": true,
"allowJs": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"declaration": true,
"outDir": "dist",
"declarationDir": "dist",
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
import * as path from 'path'
import dts from "vite-plugin-dts"
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import typescript2 from 'rollup-plugin-typescript2'
export default defineConfig({
plugins: [
vue(),
dts({
insertTypesEntry: true,
}),
typescript2({
check: false,
include: ["src/**/*.vue", "src/**/*.ts"],
tsconfigOverride: {
compilerOptions: {
outDir: "dist",
sourceMap: true,
declaration: true,
declarationMap: true,
},
},
exclude: ["vite.config.ts"]
})
],
build: {
cssCodeSplit: true,
lib: {
// Could also be a dictionary or array of multiple entry points
entry: "src/index.ts",
name: 'blocksAuth',
formats: ["es", "cjs", "umd"],
fileName: format => `blocks-auth.${format}.js`
},
rollupOptions: {
// make sure to externalize deps that should not be bundled
// into your library
input: {
main: path.resolve(__dirname, "src/index.ts")
},
external: ['vue'],
output: {
assetFileNames: (assetInfo) => {
if (assetInfo.name === 'main.css') return 'blocks-auth.css';
return assetInfo.name;
},
exports: "named",
globals: {
vue: 'Vue',
},
},
},
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
})