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

[m4rvr]

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

[ezolenko]

Could you check if bug/224 branch works for you? https://github.com/ezolenko/rollup-plugin-typescript2/tree/bug/224

[joakimbugge]

I just wanted to let you know that I have basically the same setup and I tested your branch. A single dot is still remaining in the file name, e.g. Alert.vue -> Alert..d.ts.

[Mister-Hope]

Any progress on this?

[agilgur5]

Wrote up a PR #336 to fix this, building on top of ezolenko's earlier branch and incorporating feedback from above on it.

Just noting that the root cause here is that the rollup-plugin-vue maintainers themselves said to name it as .vue.d.ts in #97 (comment) . Given that this is an integration specifically for that plugin, don't think anyone wouldn't have thought that their suggestion could cause some issues like this, but we all make mistakes 😅

[agilgur5]

Released in 0.32.0

[andrew0]

@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.

[agilgur5]

@Mister-Hope @joakimbugge @dhruvkb @alexancheck would any of you be able to provide input or reproductions on the above? (all of you commented on or upvoted this issue)

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.

Given the above and that vue-tsc produces .vue.d.ts files (see also my repro in #336 (comment)), it is likely that we will revert the change in #336 that was requested by this issue.

If you believe it should be .d.ts and not .vue.d.ts, please explain why with examples.
As far as I can tell (and I am not a Vue user), per the above evidence, .vue.d.ts seems to be the more accurate and supported extension (both officially and community supported).

[joakimbugge]

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.

[dhruvkb]

In the project where I encountered this issue, I ended up not using rollup-plugin-typescript2 and switched to vue-tsc. Sorry I can't reproduce this anymore.

[agilgur5]

@dhruvkb in the vue-tsc project, you're also using .vue.d.ts declaration files, right?
(as in, MyComponent.vue.d.ts, not MyComponent.d.ts)

That seems to be what vue-tsc outputs, per my above comment, so confirming that would still be helpful for alignment! Appreciate the response 🙂

[dhruvkb]

Yes vue-tsc also outputs .vue.d.ts files and they are resolved properly when importing components with the .vue extension. I think adding the .vue before .d.ts is a good idea. I'll take my 👍 back.

[agilgur5]

So not everyone has responded unfortunately, but I think we have more than enough tie-breaking votes and evidence to go forward with reverting this. Will have a PR out for that shortly, though it may only release during the next breaking release.

As an aside, note that this may very well be impacted by recent upstream issues with newer node16+ moduleResolution such as microsoft/TypeScript#50133 and microsoft/TypeScript#49970

[agilgur5]

Reverted the change and went back to .vue.d.ts in #410, which has been released in 0.33.0