Goto definition broken after vue add typescript

[williamhCode]

I have a project that was using vue and javascript. The language server was working well with tsserver in both neovim and vscode (with Vue-Official). After I did vue add typescript, a shims-vue.d.ts was added to my src directory and also a tsconfig.json. However, when i goto defintion a vue component in a .vue file, it just jumps to the shims-vue.d.ts. The same happens with @/ paths. Also in my js files, goto defintion doesn't work at all.

Any ideas why this might be happening? Help is appreciated thanks!

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "allowJs": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/**/*.d.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

src/shims-vue.d.ts

/* eslint-disable */
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

Edit:
some more info.
It converted the main.js to main.ts, so I had to change it back in vue.config.js with

  configureWebpack: {
    entry: './src/main.js',
  },

also here is the package.json and vue.config.js

{
  "name": ...,
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 8081",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build-sit": "vue-cli-service build --mode sit",
    "format": "prettier --write \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json,vue}\""
  },
  "dependencies": {
    "@ckeditor/ckeditor5-vue": "^5.1.0",
    "aos": "^3.0.0-beta.6",
    "axios": "^1.6.8",
    "bootstrap": "^5.3.2",
    "chart.js": "^4.4.2",
    "ckeditor5-custom-build": "file:ckeditor5-41.4.2",
    "codemirror": "^5.65.15",
    "codemirror6-bootstrap-theme": "^0.0.1",
    "core-js": "^3.8.3",
    "flatpickr": "^4.6.13",
    "jquery": "^3.7.1",
    "jquery-freeze-table": "^1.3.0",
    "js-base64": "^3.7.2",
    "jwt-decode": "^4.0.0",
    "moment": "^2.30.1",
    "numeral": "^2.0.6",
    "popper.js": "^1.16.1",
    "qrcode.vue": "^3.4.1",
    "raw-loader": "^4.0.2",
    "simple-code-editor": "^2.0.8",
    "swiper": "^10.3.1",
    "vue": "^3.0.0",
    "vue-carousel": "^0.18.0",
    "vue-codemirror": "^4.0.6",
    "vue-recaptcha": "^3.0.0-alpha.6",
    "vue-router": "^4.0.0",
    "vue3-recaptcha2": "^1.8.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "^5.0.1",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-service": "^5.0.8",
    "@vue/eslint-config-typescript": "^9.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "typescript": "~4.5.5",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/typescript"
    ],
    "parserOptions": {
      "parser": "@typescript-eslint/parser"
    },
    "rules": {},
    "globals": {
      "$": "readonly",
      "jquery": "readonly",
      "jQuery": "readonly",
      "moment": "readonly"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

const { defineConfig } = require("@vue/cli-service");
const webpack = require("webpack");

require("events").EventEmitter.defaultMaxListeners = 20;

const proxyTargetLocal = {
  target: "https://localhost:7060",
  changeOrigin: true,
  autoRewrite: true,
};
const proxyTargetMedia = {
  target: ...,
  changeOrigin: true,
  autoRewrite: true,
};

module.exports = defineConfig({
  productionSourceMap: false,
  transpileDependencies: true,
  chainWebpack: (config) => {
    config.plugin("provide").use(webpack.ProvidePlugin, [
      {
        $: "jquery",
        jquery: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
        moment: "moment",
      },
    ]);
  },
  publicPath: "/marketing-mng",
  outputDir: "../build/backend",
  devServer: {
    port: 8081,
    proxy: {
      "^/api": proxyTargetLocal,
      "^/media": proxyTargetMedia,
    },
  },
  configureWebpack: {
    entry: './src/main.js',
  },
});

[so1ve]

Remove src/shims-vue.d.ts

[williamhCode]

If I remove the file, goto definiton doesn't work at all.

[so1ve]

Are you using vue 2?

[williamhCode]

I am using vue 3

[RayGuo-ergou]

Try to add
export {}
In shims file