I'm writing a library of react components using Vite and TypeScript. To create type definition files I'm trying to use the recommended plugin vite-plugin-dts. This is what my vite.config.ts file looks like:
import { defineConfig } from "vite";
import dts from "vite-plugin-dts";
import { resolve } from "node:path";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [
react(),
dts({
insertTypesEntry: true,
}),
],
build: {
sourcemap: true,
emptyOutDir: true,
lib: {
entry: resolve(__dirname, "src/lib/index.ts"),
name: "TelefragEditor",
formats: ["es", "umd"],
fileName: (format) => `telefrag-editor.${format}.js`,
},
rollupOptions: {
external: ["react", "react-dom", "quill", "@alxgrn/react-form", "highlight.js"],
output: {
globals: {
react: "React",
"react-dom": "ReactDOM",
quill: "Quill",
"highlight.js": "hljs",
"@alxgrn/react-form": "@alxgrn/react-form",
},
},
},
},
});
The problem is that as a result of the build, a file index.d.ts is created in the dist folder which contains a single line
export * from './src/lib/index'
which is obviously incorrect :(
I tried to google a solution to this problem, but it seems that no one else has it. Therefore, I don’t even understand which direction to move to solve it. I will be glad to any ideas. Here is a link to the repository of the entire project: https://github.com/alxgrn/telefrag-editor There I use the configuration that comes with the Vite by default.
As it turned out, the problem is that Vite changed the configuration files for the TS, and the plugin is oriented towards the old format. To solve the problem, you need to specify the path to the configuration file.
plugins: [
react(),
dts({
rollupTypes: true,
tsconfigPath: "./tsconfig.app.json",
}),
],
In my case, I made a separate config for the plugin. You can read more here: https://github.com/qmhc/vite-plugin-dts/issues/344
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With