Volar cannot deduce component type correctly

[jsonleex]

Question

// package.json
{
  "name": "xxx",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview --port 5050",
    "test:unit": "vitest --environment jsdom",
    "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'",
    "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'",
    "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "preinstall": "npx only-allow pnpm -y",
    "prepare": "husky install",
    "release": "standard-version"
  },
  "dependencies": {
    "@vueuse/core": "^8.2.5",
    "pinia": "^2.0.13",
    "vue": "^3.2.31",
    "vue-router": "^4.0.14"
  },
  "devDependencies": {
    "@arco-design/web-vue": "^2.23.0",
    "@commitlint/cli": "^16.2.3",
    "@commitlint/config-conventional": "^16.2.1",
    "@rushstack/eslint-patch": "^1.1.0",
    "@types/jsdom": "^16.2.14",
    "@types/node": "^16.11.26",
    "@vitejs/plugin-vue": "^2.3.1",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^10.0.0",
    "@vue/test-utils": "^2.0.0-rc.18",
    "@vue/tsconfig": "^0.1.3",
    "cypress": "^9.5.3",
    "eslint": "^8.5.0",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-vue": "^8.2.0",
    "husky": "^7.0.4",
    "jsdom": "^19.0.0",
    "less": "^4.1.2",
    "lint-staged": "^12.3.7",
    "prettier": "^2.5.1",
    "standard-version": "^9.3.2",
    "start-server-and-test": "^1.14.0",
    "stylelint": "^14.6.1",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-rational-order": "^0.1.2",
    "stylelint-config-standard": "^25.0.0",
    "stylelint-order": "^5.0.0",
    "typescript": "~4.6.3",
    "unplugin-auto-import": "^0.7.1",
    "unplugin-vue-components": "^0.19.2",
    "vite": "^2.9.1",
    "vitest": "^0.8.1",
    "vue-tsc": "^0.33.9"
  }
}

// vite.config.ts
import { fileURLToPath, URL } from 'url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ArcoResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      dts: 'src/auto-imports.d.ts',
      eslintrc: { enabled: true },
      imports: ['vue', 'vue-router', '@vueuse/core']
    }),
    Components({
      dirs: ['src/components'],
      dts: 'src/components.d.ts',
      resolvers: [ArcoResolver({ importStyle: 'less', resolveIcons: true })]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Solution

[antfu]

I can't reproduce it on https://github.com/antfu/vitesse

[jsonleex]

Steps to reproduce https://github.com/jsonleex/issue-355

1. Create demo with npm init vue@3

Vue.js - The Progressive JavaScript Framework

✔ Project name: … issue-355
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

2. Install & config unplugin-vue-components

import { fileURLToPath, URL } from 'url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import Components from 'unplugin-vue-components/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      dirs: ['src/components'],
      dts: 'src/components.d.ts',
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

3. Run npm run dev to gen components.d.ts
4. Modify App.vue

<template>
  <RouterView />
  <HelloWorld />
</template>

[jsonleex]

The difference between the two repositories is ts.config.json.

Maybe this bug is caused by Volar, but can resolved by adding import '@vue/runtime-core' to components.d.ts

[antfu]

https://github.com/jsonleex/issue-355/blob/main/tsconfig.app.json#L3

Your tsconfig does not include the .d.ts file. You could either add it or move the dts under src/

[jsonleex]

https://github.com/jsonleex/issue-355/blob/main/vite.config.ts#L14

components.d.ts is already in src/, but it still doesn't work.

[JensDll]

I've also had this happening recently. #344 is what broke it for me but only when installing with pnpm. Without any hoisting settings configured, the @vue/* packages don't end up in the root modules folder, and TypeScript gets confused, I think.

Adding either shamefully-hoist=true or public-hoist-pattern[]=@vue* to the projects .npmrc worked for me.

[DrJume]

Using pnpm, I fixed it by installing @vue/runtime-core as a devDependency.

[chioio]

When I using storybook with vite project, this problem occurred again. @antfu

[dingpc19]

i have the same problem，solved the question by your methods，3q.
but the tsx files still have the problem ,do you know how to fix it @jsonleex