Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vite + TS + vite-plugin-dts - incorrect generation of type files

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.

like image 201
Alexander Fedorov Avatar asked Oct 31 '25 13:10

Alexander Fedorov


1 Answers

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

like image 52
Alexander Fedorov Avatar answered Nov 02 '25 02:11

Alexander Fedorov



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!