Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Vue declaration files endings -- `.vue.d.ts` vs. `.d.ts`

See original GitHub issue

What happens and why it is wrong

Building works fine but the generated declaration file from a SFC for example MyComponent.vue is named as MyComponent.vue.d.ts which breaks my imports (also generates like that without importing another SFC).

Renaming the file to MyComponent.d.ts works and the errors are gone.

Environment

I’m using this plugin together with rollup-plugin-vue and rollup-plugin-babel. I also have @rollup/plugin-commonjs & @rollup/plugin-node-resolve if that does matter.

Could that be a configuration problem with my tsconfig.json? I will try to add the configs if needed.

Versions

typescript: 3.8.3
rollup: 2.3.2
rollup-plugin-typescript2: 0.27.0

Issue Analytics

State:
Created 3 years ago
Comments:13 (1 by maintainers)

Top GitHub Comments

2reactions

joakimbuggecommented, Jul 29, 2022

I can’t find whatever project I was working on when I commented on this issue, but I did find another project from around that same time. In the project I’m importing components with file extension (import MyComponent from './MyComponent.vue'), the generated type file is named MyComponent.vue.d.ts and all imports work fine in index.d.ts.

I don’t think it ever hit me that the missing file extension was the culprit, but that probably was the reason for it not working. I was young and dumb and hated file extensions. It was a phase.

This change should probably be reverted.

2reactions

andrew0commented, Jul 24, 2022

@m4rvr Can you recall how you were importing your Vue components when you originally ran into this issue? i.e. were you doing import MyComponent from './MyComponent.vue' or import MyComponent from './MyComponent'? According to the Vue team, it is not recommended to auto-resolve the .vue extension, and they won’t support extensionless SFC imports going forward.

As far as I can tell, this issue was only occurring if you were importing the component without the extension. But now that this plugin is stripping the .vue extension from the .d.ts files, import MyComponent from './MyComponent.vue' no longer works.

Top Results From Across the Web

What does the shims-tsx.d.ts file do in a Vue-Typescript project?

I guess Typescript looks for all .d.ts in the same directory or something like that. In any case, the contents are this: declare...

*.d.ts vs *.ts - this vs that - in the front-end development?

*. d. ts is the type definition files that allow to use existing JavaScript code in TypeScript. declare function sum(a: number, b: number):...

How To Use TypeScript with Vue Single File Components

d.ts ). A declaration file is a file that does not contain any executable code but contains descriptions of code that exists outside...

Your first Vue 3 app using TypeScript - This Dot Labs

The solution? Define a shim or declation file at the root folder of the app. This file has the extension of .d.ts ....

TSConfig Reference - Docs on every TSConfig option

Function lacks ending return statement and return type does not include ... Generate .d.ts files for every TypeScript or JavaScript file inside your...