TS-Errors when building with Vite v5.3.1

[razorness]

Describe the bug

When creating a new project using template vue-ts and using vite-plugin-dts for building a library, you'll get TS errors for external libraries.

user@wsl:/opt/vite-project$ yarn build
vite v5.3.1 building for production...
src/components/HelloWorld.vue:2:21 - error TS2792: Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?

2 import { ref } from 'vue'
                      ~~~~~
src/components/HelloWorld.vue:4:1 - error TS2347: Untyped function calls may not accept type arguments.

4 defineProps<{ msg: string }>()
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/components/HelloWorld.vue:10:10 - error TS2339: Property 'msg' does not exist on type '{}'.

10   <h1>{{ msg }}</h1>
            ~~~
src/components/HelloWorld.vue:13:35 - error TS2339: Property 'count' does not exist on type '{}'.

13     <button type="button" @click="count++">count is {{ count }}</button>
                                     ~~~~~
src/components/HelloWorld.vue:13:56 - error TS2339: Property 'count' does not exist on type '{}'.

13     <button type="button" @click="count++">count is {{ count }}</button>
                                                          ~~~~~
src/main.ts:1:27 - error TS2792: Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?

1 import { createApp } from 'vue';
                            ~~~~~

✓ 11 modules transformed.

[vite:dts] Start generate declaration files...
dist/style.css  1.27 kB │ gzip: 0.65 kB
dist/lib.es.js  3.38 kB │ gzip: 1.40 kB │ map: 2.11 kB
[vite:dts] Start rollup declaration files...
Analysis will use the bundled TypeScript version 5.4.2
*** The target project appears to use TypeScript 5.5.2 which is newer than the bundled compiler engine; consider upgrading API Extractor.
[vite:dts] Declaration files built in 2947ms.

✓ built in 3.08s
user@wsl:/opt/vite-project$

Reproduction

https://github.com/razorness/vite-dts-compile-errors

Steps to reproduce

• create new project with template: yarn create vite --template vue-ts
• add vite-plugin-dts and configure: yarn add --dev vite-plugin-dts
• add taze to update deps: yarn add --dev taze
• upgrade all packages by yarn taze major -I
• append simple export to main.ts

export { default as HelloWorld } from './components/HelloWorld.vue';

• exec yarn build

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD Ryzen 9 6900HS Creator Edition
    Memory: 9.88 GB / 13.50 GB
    Container: Yes (WSL2)
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.15.0 - ~/.nvm/versions/node/v20.15.0/bin/node
    Yarn: 4.3.1 - ~/.nvm/versions/node/v20.15.0/bin/yarn
    npm: 10.7.0 - ~/.nvm/versions/node/v20.15.0/bin/npm
  npmPackages:
    @vitejs/plugin-vue: ^5.0.5 => 5.0.5
    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.

[luckylark2000]

hello, today I meet the same problem with you。I solve it by a few steps that I hope my solution can help you or give you some light or tips。My English is poor , but I will try my best to explain it hhh。as follows :

environment

I introduce my environment as I meet the problem that similar with yours : my root files about tsconfig have three, all of three are : tsconfig.json, tsconfig.app.json, tsconfig.node.json。and my tsconfig.json ( the remaining two is not important for this plugin ) source code is :

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

solve

OK let's solve the problem :

1. new a file named tsconfig.build.json in root content the content as follows:

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
}

2. add options to dts( ) in vite.config.ts plugins. just like this :

plugins: [
    vue(),
    vueJsx(),
    dts({
      tsconfigPath: './tsconfig.build.json',
    }),
  ],

3. then you can run your build command , probably your problem will solved.

explain

Now I explain why do this will work :
I see the READMME.md file about options, in export interface PluginOptions it has this :

/**
   * Specify tsconfig.json path
   *
   * Plugin resolves `include` and `exclude` globs from tsconfig.json
   *
   * If not specified, plugin will find config file from root
   */
  tsconfigPath?: string,

it mean's dts( ) default resolves include and exclude globs from tsconfig.json but look the tsconfig.json in your tsconfig.json most probably it don't have( except the reference ) so the plugin don't work and cause problem. so I create a new file tsconfig.build.json, almost copy the content of the tsconfig .json ,just add some include and compilerOptions. so it works.

more tips

if you use

 "paths": {
      "@/*": ["./src/*"]
    }

in your tsconfig.build.json then in your project you don‘ use relative path such as . / type ,please use @/... to replace all of them , this plugin works with the paths configure as some rules I guess.

all in all, good luck to you , hope you will solve your problem

[manuartero]

I got there due to a similar problem, since this issue on GitHub could be shown to someone else, this was my scenario and my solution: https://dev.to/manuartero/ts-transpiling-absolute-path-statements-in-your-npm-package-f15.

hope this helps.

[iky-cloud]

package/App.vue:7:1 - error TS2304: Cannot find name 'onMounted'.

7 onMounted(() => {
  ~~~~~~~~~
package/components/KTable/index.vue:4:18 - error TS2304: Cannot find name 'ref'.

4 const formData = ref({
                   ~~~
package/components/KTable/index.vue:49:15 - error TS2304: Cannot find name 'ref'.

49 const count = ref(0)
                 ~~~
package/components/KTable/Test.vue:30:15 - error TS2304: Cannot find name 'ref'.

30 const count = ref(0)
                 ~~~

✓ 1426 modules transformed.

[vite:dts] Start generate declaration files...
computing gzip size (1)...[vite:dts] Declaration files built in 4592ms.

dist/style.css     39.16 kB │ gzip:  6.10 kB
dist/index.es.js  124.99 kB │ gzip: 35.54 kB
dist/style.css     39.16 kB │ gzip:  6.10 kB
dist/index.umd.js  95.36 kB │ gzip: 31.47 kB
dist/style.css     39.16 kB │ gzip:  6.10 kB
dist/index.cjs.js  95.24 kB │ gzip: 31.44 kB``

"vite": "^5.4.1",