Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    I couldn’t reproduce and check if this is a solution, but the first thing that came to my mind is to include the files for which you want type definitions.
    like:

    dts({
  insertTypesEntry: true,
  include: ['src'],
})

    Also, can you share your tsconfig?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search