unplugin / unplugin-auto-import

Auto import APIs on-demand for Vite, Webpack and Rollup

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Cannot find name 'ref'.ts(2304)

thisVioletHydra opened this issue · comments

commented

Error

image

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"
  },

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 :)

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 :)

image
cool, all worked