Closed jsonleex closed 2 years ago
I can't reproduce it on https://github.com/antfu/vitesse
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
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)),
},
},
})
npm run dev
to gen components.d.ts
App.vue
<template>
<RouterView />
<HelloWorld />
</template>
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
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/
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.
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.
Using pnpm
, I fixed it by installing @vue/runtime-core
as a devDependency.
When I using storybook with vite project, this problem occurred again. @antfu
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
Question
Solution