language-tools icon indicating copy to clipboard operation
language-tools copied to clipboard

vue-tsc: After upgrading to v2, a lot of `Could not find a declaration file for module ABC.vue` errors are reported

Open sceee opened this issue 3 months ago • 10 comments

After upgrading vue-tsc from 1.8.27 to 2.0.5, a lot of typescript errors are reported when running

vue-tsc --noEmit -p tsconfig.vitest.json --composite false

in a vue 3.4.21 project.

The errors follow a similar format like this for all bootstrap-vue-next components:

node_modules/bootstrap-vue-next/src/components/index.ts:1:37 - error TS7016: Could not find a declaration file for module './BAccordion/BAccordion.vue'. 'C:/my/project/node_modules/bootstrap-vue-next/src/components/BAccordion/BAccordion.vue' implicitly has an 'any' type.

1 export {default as BAccordion} from './BAccordion/BAccordion.vue'

With vue-tsc 1.8.27, executing the command works without errors.

Strangely, in a pretty project with a pretty similar setup, these errors are not reported. tsconfig files have the same contents in both projects. It also happens in CI.

In Visual Studio code, it seems typescript correctly resolves the types as in the IDE, no errors are displayed. It only happens when executing the vue-tsc command in the terminal.

Do you have any idea how I could further debug where this suddenly comes from?

sceee avatar Mar 06 '24 13:03 sceee

I have experienced this problem as well and I have narrowed this down in my codebase to the tsconfig.json not including "src/**/*.vue". If I explicitly include all the .vue files this works fine, but if I only want to include the vue files that are traversable from the package index then this fails and no .d.ts files are generated for these files.

In short, this works:

"include": ["src/index.ts", "src/**/*.vue"]

But this doesn't (and previously did in v1.8.x):

"include": ["src/index.ts"]

thebanjomatic avatar Mar 06 '24 17:03 thebanjomatic

IMO This is expected, you should include *.vue files if you want them to get type-checked.

so1ve avatar Mar 07 '24 04:03 so1ve

IMO This is expected, you should include *.vue files if you want them to get type-checked.

I see where you are coming from, but if those .vue files are reachable from src/index.ts then they should also be included in the compilation as in my understanding, that's how it works for .ts/.js files.

One usecase where this is useful is if you don't want to generate type declarations for components that are part of storybook documentation or that sort of thing. You might be able to exclude using a pattern like "**/stories/*.vue", but I find it's sometimes more logical to use a tsconfig that only includes the root files for your build artifacts so that you are only going to generate type declaration files for files that are reachable from those entry points.

I still view this as a regression since .ts files don't have this limitation and it worked fine in the 1.x release.

thebanjomatic avatar Mar 07 '24 04:03 thebanjomatic

Yes, seemed to be a regression

so1ve avatar Mar 07 '24 04:03 so1ve

Actually, my tsconfig.json looks like this:

"include": [
    "env.d.ts",
    "shims-bootstrap-vue.d.ts",
    "src/**/*",
    "src/**/*.vue",
    ...
  ],

so I have indeed included "src/**/*.vue".

I'm not sure if you @thebanjomatic encountered this issue with your own .vue files (in your own src directory) but in my case as written in the issue, this occurs for .vue files by the dependency bootstrap-vue-next in node_modules.

But from there, it might be that it is the same case as you described (.vue file referenced from index.ts) that might be causing the issue.

But bootstrap-vue-next also exports types in their `package.json:

...,
"exports": {
    ".": {
      "types": "./dist/src/BootstrapVue.d.ts", // <------------------
      "import": "./dist/bootstrap-vue-next.mjs",
      "require": "./dist/bootstrap-vue-next.umd.js"
    },
    "./dist/bootstrap-vue-next.css": "./dist/bootstrap-vue-next.css",
    "./src/*": "./src/*",
    "./src/styles/styles.scss": "./src/styles/styles.scss"
  },
...

So I'm not sure whether the .vue files should anyway be used.

Additionally, as mentioned, I am wondering why this happens in one project but not in a very similar project with almost identical setup (and tsconfig.json) but I could not figure out what is causing the difference.

sceee avatar Mar 07 '24 07:03 sceee

@so1ve here is a good example repo to reproduce the regression: https://github.com/vercel/turbo/tree/main/examples/with-vue-nuxt

davidmatter avatar Mar 07 '24 15:03 davidmatter

A:

"include": ["src/index.ts", "src/**/*.vue"]

It works in v1.8.x & v2.0.6

B:

"include": ["src/index.ts"]

It works in v1.8.x.

When I use v2.0.6, there are some vue.dts files missing.

In the meanwhile, vue.dts files of some components can be generated, but the types of emits or slots are lost internally.

The above content is limited to the setup script component.

eiinu avatar Mar 08 '24 06:03 eiinu

@so1ve do you have any idea how I could further trace this down what's causing this issue? I tried to compare it to a second project with almost identical setup but I could not figure out what is causing this on one project but not on another.

sceee avatar Mar 13 '24 13:03 sceee

Ok, I figured out what caused the issue after the update in my case. As so often, it was an individual (wrong?!) configuration. Sorry for raising this.

So if anyone else runs into this: I had an import like this in one of my .ts files:

import type { OrchestratedToast } from 'bootstrap-vue-next/src/BootstrapVue.js'

Changing/correcting this to

import type { OrchestratedToast } from 'bootstrap-vue-next'

solved the issue as now, I guess the correct d.ts definitions are used instead of the source.

From my side, this issue can be closed. But I'm not sure whether you @so1ve want to keep this issue open as you mentioned a regression here so I'm leaving it open for now.

sceee avatar Mar 14 '24 12:03 sceee

The configuration should behave similarly to the actual TS language server in that way that for all listed files in the "include" all imported files are also implicitly included.

Especially, in a monorepo workspace setup this change is not fixable and a huge blocker. Why?

Because, we now need to declare in the "include" all used dependencies explicitly resulting into too many TS/Vue files that are getting checked instead of only checking the actually used dependencies.

This was already broken once in "vue-tsc" and they managed to fix it, but broke it again with the release of v2.

Please fix it again, so we can finally apply the update.

I'd also recommend to change the issue title to:

vue-tsc v2 not longer includes imports of "include" files

fdc-viktor-luft avatar Apr 03 '24 06:04 fdc-viktor-luft