DTS not compatible with latest React Vite tsconfig structure

[mochizin]

Describe the bug

I'm trying to use DTS with Vite for React 5.3.1
In this version Vite introduced tsconfig.app.json and reference it in tsconfig.json:

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

For some reason, the tsconfig.app.json is not being recognized by DTS. I get the following error:

or
Module './App.tsx' was resolved to 'libray-ui/src/App.tsx', but '--jsx' is not set.

The solution that I'm using is add tsconfigPath: "./tsconfig.app.json", Is this a good solution? Edit: This solution doesn't work properly

plugins: [
    react(),
    dts({
      tsconfigPath: "./tsconfig.app.json"
    }),
  ],

Reproduction

https://stackblitz.com/edit/vitejs-vite-yxnnz2?file=vite.config.ts

Steps to reproduce

• Run:
  npm create vite@latest
npm install @types/node
npm install --save-dev vite-plugin-dts

• vite.config.ts

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import { resolve } from "path";
import dts from "vite-plugin-dts";

export default defineConfig({
  plugins: [
    react(),
    dts(),
  ],
  build: {
    lib: {
      entry: resolve(__dirname, "src/main.ts"),
      name: "trigger-ui",
      formats: ["es"],
      fileName: "trigger-ui",
    },
    rollupOptions: {
      external: ["react", "react/jsx-runtime"],
    },
  },
});

• main.tsx file

export const Card = ({ children, ...props }: CardTypes) => {
  return <button {...props}>{children}</button>;
};

type CardTypes = {
  children: string;
} & React.ComponentPropsWithoutRef<"button">;

• Run
  npm run build

System Info

System:
    OS: Windows 11
  Binaries:
    Node: 20.11.1
    npm: 10.2.4
  npmPackages:
    @vitejs/plugin-react: ^4.3.1 => 4.3.1
    vite: ^5.3.1 => 5.3.1
    vite-plugin-dts: ^3.9.1 => 3.9.1

Validations

• Read the FAQ.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[yestay90]

@mochizin , hello. Is there any updates on this subject? Should we recreate react and vite app with older version? I want to install older version of vite. Which is doesnt have this problem?

[yestay90]

@mochizin , I removed tsconfig.app.json and moved all its content to tsconfig.json. And it started to work properly. I could import UI component to my other project.

[mochizin]

@mochizin , I removed tsconfig.app.json and moved all its content to tsconfig.json. And it started to work properly. I could import UI component to my other project.

Yeah, this was my solution as well, but it is how Vite do in previous versions. I was looking for some solution/fix that works with latest Vite

[willian]

@yestay90, @mochizin, I think this fix must come from this plugin in a future update. Until it happens, this is what I did to fix it on my side:

    dts({
      tsconfigPath: resolve(__dirname, "tsconfig.app.json"),
      rollupTypes: true,
    }),

So, I didn't need to change the "Vite way" of organizing the tsconfig files.

[mochizin]

@willian, I tried to do that previously as well but when I run npm run build that contains tsc -b, it generates a vite.config.js file in my root folder. I'm using vite.config.ts.

So this solution doesn't work for me 😕

[phuongthuan]

@mochizin I got exactly the same your issue
Here is the fix

  plugins: [
    react(),
    dts({
      rollupTypes: true,
      tsconfigPath: "./tsconfig.app.json",
    }),
  ],

[fahrikurniawan99]

@phuongthuan wow amazing how this works, why does it happen?

[mochizin]

@phuongthuan can't see the file, can you post the code here?

[lizyChy0329]

@mochizin I got exactly the same your issue @mochizin我得到了与你完全相同的问题 Here is the fix这是修复方法

  plugins: [
    react(),
    dts({
      rollupTypes: true,
      tsconfigPath: "./tsconfig.app.json",
    }),
  ],

It work! @qmhc

[albertdugba]

This also ended up working for me

[elkofy]

Me too after 4 days of searching

[qmhc]

It has been updated in FAQs.