Cannot find name 'ref'.ts(2304)
thisVioletHydra opened this issue · comments
Roman commented
Error
vite.config.ts
export default defineConfig({
plugins: [
vue(),
mkcert(),
Components(options.component),
ViteAliases(),
ViteFonts({
google: {
families: ['Source Sans Pro'],
},
}),
AutoImport({
// targets to transform
include: [
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
/\.vue$/,
/\.vue\?vue/, // .vue
/\.md$/, // .md
],
// global imports to register
imports: [
// presets
'vue',
'vue-router',
// custom
{
'@vueuse/core': [
// named imports
'useMouse', // import { useMouse } from '@vueuse/core',
// alias
['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
],
axios: [
// default imports
['default', 'axios'], // import { default as axios } from 'axios',
],
'[package-name]': [
'[import-names]',
// alias
['[from]', '[alias]'],
],
},
],
}),
],
server: {
https: true,
},
});
tsconfig.json
{
"display": "TypeScript compiler",
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"useDefineForClassFields": true,
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["DOM", "DOM.Iterable", "ESNext", "ESNext.AsyncIterable"],
"types": ["@types/node"],
"paths": {
"@/*": ["./*"],
"@@/*": ["./*"],
"~/*": ["./*"],
"~~/*": ["./*"],
"@*": ["./src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
package.json
"dependencies": {
"pinia": "^2.0.4",
"postcss-load-config": "^3.1.0",
"vue": "^3.2.23",
"vue-i18n": "^9.2.0-beta.20",
"vue-toastification": "^2.0.0-rc.5"
},
"devDependencies": {
"@intlify/vite-plugin-vue-i18n": "^3.2.1",
"@types/node": "^16.11.10",
"@typescript-eslint/eslint-plugin": "^5.3.1",
"@typescript-eslint/parser": "^5.3.1",
"@vitejs/plugin-vue": "^1.10.1",
"@vue/compiler-sfc": "^3.2.22",
"@vue/eslint-config-typescript": "^9.0.1",
"buffer": "^6.0.3",
"cssnano": "^5.0.12",
"eslint": "^8.3.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-airbnb-typescript": "^16.0.0",
"eslint-config-prettier": "^8.3.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-import-resolver-babel-module": "5.3.1",
"eslint-import-resolver-custom-alias": "^1.3.0",
"eslint-import-resolver-nuxt": "^1.0.1",
"eslint-import-resolver-webpack": "^0.13.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-json": "^3.1.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-nuxt": "^3.1.0",
"eslint-plugin-optimize-regex": "^1.2.1",
"eslint-plugin-package-json": "^0.1.4",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-prettier-vue": "^3.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-sonarjs": "^0.10.0",
"eslint-plugin-unicorn": "^39.0.0",
"eslint-plugin-vue": "^8.1.1",
"npm-run-all": "^4.1.5",
"prettier": "^2.5.0",
"typescript": "^4.5.2",
"unplugin-auto-import": "^0.5.1",
"unplugin-vue-components": "^0.17.2",
"vite": "^2.6.14",
"vite-aliases": "^0.8.7",
"vite-plugin-fonts": "^0.2.2",
"vite-plugin-mkcert": "^1.5.2",
"vue-clipboard3": "^1.0.1",
"vue-eslint-parser": "^8.0.1",
"vue-tsc": "^0.29.7"
},
Evertvdw commented
This plugin generates a auto-imports.d.ts
file which is at the root of your project. You only have files under src/...
included in your tsconfig.json
. Add this file as well to you project to make it work :)
Roman commented