Error launching build with version v4.4.1 and v4.4.2

[matteoscaramuzza]

Reproduction

Launch the build

Steps to reproduce the bug

Launch npm run build

Expected behavior

Build ends correctly

Actual behavior

Build show error for every usage of $route and $router in TypeScript

Additional information

No response

[matteoscaramuzza]

Here's an example:

src/views/Customers/CustomerForm.vue:543:12 - error TS2339: Property '$router' does not exist on type 'CustomerForm'.

543       this.$router.replace({

[daniluk4000]

Same for our Nuxt project, but can't reproduce in plain empty project. Weird...

[callumacrae]

Same issue here - this.$route and this.$router have lost their types, and so has this.$store and some other stuff we've defined in our env.d.ts

I'll try to work on a reproduction as this issue hasn't provided one, but I'm super busy today so I dunno when I'll be able to provide it! If anyone else can provide one first that would be great :)

[KazariEX]

Speculate that the error occurred between 4.4.0 -> 4.4.1; After fixing the version to 4.4.0, the type will no longer be lost.

https://github.com/KazariEX/nuxt-minimal

[KazariEX]

It seems that all declare module "@vue/runtime-core" in other packages need to be modified to declare module "vue"

[amir20]

This is also happening to me while using https://github.com/unplugin/unplugin-auto-import. After the upgrade, I see lots of errors. Looks like auto-imports.d.ts is not processing correctly. I haven't dove deep yet but upgrading to 4.4.2 has been the culprit.

[matteoscaramuzza]

@posva I'm sorry for the previous, I didn't want to anger you. I've misunderstood moving the issue to a discussion as if it wasn't important and was delayable.
I apologize for that and for being too impulsive.

I've not added more details because of lack of time and because I thought there wasn't much to say: I've made no changes from the previous version (v4.4.0) and after I upgraded (automatically, launching an npm i, because I had set version like this -> "^4.4.0" in the packages.json) to both the versions every $route or $router version usage in TS code was marked as error.

I still think that, if this change was made to fix problems for other users and it's not an error, it shouldn't be made in a patch version simply because of the fact that is breaking, don't you think?

In order to add some information to help you, I upgraded in multiple projects and this bug happens in all of them.

[callumacrae]

🤷‍♂️

presumably @posva wasn't aware of the issue it would cause some users before releasing!

i'm not sure how this discussion is helping the issue get fixed - maybe the time spent here would be best spent on creating a minimal reproduction or trying to debug the cause of the issue :)

[matteoscaramuzza]

Sorry, @callumacrae. I know that problems may be difficult to find before release. You'right! I was only answering this part of his comment:

While this might come as a breaking change to you, it was fixing errors for other users (including myself) and was a needed change.

But let's not focus on this, it's not that important. Let's find a solution.

I'll later try to replicate the problem and share with you!

[amir20]

Are there any updates? It's hard to tell what is wrong. I would love to help otherwise. I find all my modules with typescript, specifically with unplugin-auto-import to be broken.

[posva]

AFAIK the problem doesn't come from unplugin-auto-import but rather from other libraries still using declare '@vue/runtime-core' instead of declare 'vue'.

Currently, it's possible to search for these in node_modules/* and patch them locally until fixed

[daniluk4000]

AFAIK the problem doesn't come from unplugin-auto-import but rather from other libraries still using declare '@vue/runtime-core' instead of declare 'vue'.

Currently, it's possible to search for these in node_modules/* and patch them locally until fixed

So is this code in Nuxt incorrect and can cause this issue?

https://github.com/nuxt/nuxt/blob/754fc30e5d0fe506ee3218f9c4a11fa047e3553f/packages/nuxt/src/components/templates.ts#L128

[posva]

Maybe, I haven't tested. You will notice they use a double declaration; that didn't work out in vue-router and pinia.

[mthomasuk]

@posva can confirm that patching libraries incorrectly using declare module '@vue/runtime-core' to use declare module 'vue' worked perfectly 🙏 (vue-i18n was causing us issues; also after upgrading unimport as @daniluk4000 suggested below, the declarations were correct in that dependency) - thank you!

[daniluk4000]

Problem has been solved for us with [email protected].

[PierreNAPOLETANO]

I've had the same problem with this code since I upgraded to version 4.4.2 of vue-router. "export let $t: ComponentCustomProperties['$t'];"

[amir20]

Interesting... I use https://github.com/antfu-collective/vitesse/ as a template. And I noticed that project has also been updated to v4.4.2. But doesn't have this issue. I am going to investigate a little more. Perhaps some thing else changed.

[amir20]

Update on this. I looked at various configurations in vitesse.

So before I noticed error like this:

assets/components/LogViewer/SimpleLogItem.vue:5:42 - error TS2339: Property 'showTimestamp' does not exist on type 'CreateComponentPublicInstance<Readonly<ExtractPropTypes<__VLS_TypePropsToOption<{ logEntry: SimpleLogEntry; showContainerName?: boolean | undefined; }>>>, ... 18 more ..., {}>'.

5     <LogDate :date="logEntry.date" v-if="showTimestamp" class="select-none" />
                                           ~~~~~~~~~~~~~

Matching my .npmrc actually fixed it.

shamefully-hoist=true
strict-peer-dependencies=false

I am guessing something is happening here because of declare '@vue/runtime-core' instead of declare 'vue'.

[rs3d]

I'm experiencing the same issue.
My code has the following types for a globally available function $sanitze added via a vue-plugin.

export default myPlugin;

declare module 'vue' {
  interface ComponentCustomProperties {
    $sanitize: typeof sanitize;
  }
}

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $sanitize: typeof sanitize;
  }
}

This should follow the official doc instructions: https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties

Only using the 2nd type fixes the error for me:

export default myPlugin;

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $sanitize: typeof sanitize;
  }
}

[Joebayld]

I'm confused why this is a discussion and not an issue. Literally all of my projects are broken because of this unless I revert back to vue-router version 4.4.0. I will try and make a test case.

[amir20]

Updating .npmrc worked for me. #2321 (comment) I wonder if it does for you too.

[Joebayld]

@amir20 I don't have a .npmrc file. Can't seem to fix this - how frustrating.

[Loongphy]

#2321 (reply in thread)

[stephane303]

@Joebayld did you make a test case ?

[stephane303]

I confirm that after a global upgrade of all my packages I have the same problem, I was not able to determine which upgrade started the issue, but I confirm that using version 4.4.0, solve the issue for now.

I also briefly saw the same issue not only with $router, but also with all my $t (vue-i18n).

[davidAtInleague]

This is sort of in the changelog ("If you are also augmenting @vue/runtime-core, you will likely have to change it to vue.") but I didn't initially read that as "if you are transitively, via a dependency, augmenting...". It may be helpful to future troubleshooters to include a link to this discussion on the changelog for 4.4.1.