JSX element type 'RouterLink' does not have any construct or call signatures

user_7863919 0
Viewed 475

I've found a lot of issues regarding this across the internet and stack overflow, however, the problem always seems to be with React? like this one, however, I am using Vue and the error happens to Vue's own components which are part of a freshly installed project I made to test out types and in general type hinting

Error:

src/App.vue:3:6 - error TS2604: JSX element type 'RouterLink' does not have any construct or call signatures.

3     <router-link to="/sales-running">Sales Running</router-link>

package.json

{
  "name": "vue-sales-running",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint",
    "watch": "build --watch",
    "strict": "vue-tsc --noEmit"
  },
  "dependencies": {
    "axios": "^0.27.2",
    "core-js": "^3.8.3",
    "i": "^0.3.7",
    "register-service-worker": "^1.7.2",
    "tailwindcss": "^3.0.24",
    "vue": "^3.2.13",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.3",
    "vue-tsc": "^0.37.1",
    "vuex": "^4.0.0",
    "watch": "^1.0.2"
  },
  "devDependencies": {
    "@types/jest": "^27.0.1",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-e2e-cypress": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-pwa": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-plugin-unit-jest": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "@vue/test-utils": "^2.0.0-0",
    "@vue/vue3-jest": "^27.0.0-alpha.1",
    "babel-jest": "^27.0.6",
    "cypress": "^8.3.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "jest": "^27.0.5",
    "prettier": "^2.4.1",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "ts-jest": "^27.0.4",
    "typescript": "~4.5.5"
  }
}

App.vue (The place it complains)

<template>
  <nav class="flex m-auto justify-center">
    <router-link to="/sales-running">Sales Running</router-link>
  </nav>
</template>

<style lang="scss">
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

I've made a custom strict script/command which executes the vue-tsc --noEmit command, this command does what I expect and now stops my script compiling if it does not match the types expected.

However I now have another problem, is that I get errors from Vue's own prebuild components which are used for navigation?

vue-tsc vuejs3 vue.js typescript types
2 Answers

As Jacob answers in this Github issue, we need to import our components to get us the right types and resolve our errors, do also note that he wrote at the end:

Do note that this is not a permanent fix, just a workaround.

So basically we need to import our components:

For the App.vue file we now have to import the components in the bottom:

<script setup lang="ts">
import { RouterView, RouterLink } from "vue-router";
{
  RouterView;
  RouterLink;
}
</script>

So I guess for now this is what has to be done when using the composition API with typescript and the vue-tsc package

user_78639190

This and this sounds like a similar problem.

Apparently the Vue Language Features (Volar) extension is the issue, downgrade to 0.36.0

user_115794640
Related