{"record":{"id":"63fea2fefb67d16f","repo":"tailwindlabs/heroicons","slug":"importing-from-heroicons-vue-directly-is-not-su","errorCode":null,"errorMessage":"Importing from `@heroicons/vue` directly is not supported. Please import from either `@heroicons/vue/16/solid`, `@heroicons/vue/20/solid`, `@heroicons/vue/24/solid`, or `@heroicons/vue/24/outline` instead.","messagePattern":"Importing from `@heroicons/vue` directly is not supported\\. Please import from either `@heroicons/vue/16/solid`, `@heroicons/vue/20/solid`, `@heroicons/vue/24/solid`, or `@heroicons/vue/24/outline` instead\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"vue/index.esm.js","lineNumber":11,"sourceCode":"// The only reason this file exists is to appease Vite's optimizeDeps feature which requires a root-level import.\n\nexport default new Proxy(\n  {},\n  {\n    get: (_, property) => {\n      if (property === '__esModule') {\n        return {}\n      }\n\n      throw new Error(\n        `Importing from \\`@heroicons/vue\\` directly is not supported. Please import from either \\`@heroicons/vue/16/solid\\`, \\`@heroicons/vue/20/solid\\`, \\`@heroicons/vue/24/solid\\`, or \\`@heroicons/vue/24/outline\\` instead.`\n      )\n    },\n  }\n)\n","sourceCodeStart":1,"sourceCodeEnd":17,"githubUrl":"https://github.com/tailwindlabs/heroicons/blob/616b7a4dbbf3d011760af8066262cd5c6b3868f3/vue/index.esm.js#L1-L17","documentation":"The Vue package mirrors the React guard: importing from the root `@heroicons/vue` is unsupported in v2. The ESM root entry is a Proxy that throws on every property access except `__esModule`. Icons must come from `@heroicons/vue/16/solid`, `@heroicons/vue/20/solid`, `@heroicons/vue/24/solid`, or `@heroicons/vue/24/outline`.","triggerScenarios":"`import { BeakerIcon } from '@heroicons/vue'` or any named import / property access on the Vue package root in an ESM/Vite context. The Proxy get trap throws immediately when the module property is read.","commonSituations":"Editor auto-imports resolving the bare `@heroicons/vue` specifier in Vue 3 + Vite projects; tutorials or snippets written before v2; upgrading a Vue app from heroicons v1 to v2 without updating import paths; path aliases collapsing subpath imports to the root.","solutions":["Change imports to a subpath: `import { BeakerIcon } from '@heroicons/vue/24/outline'`.","Update IDE auto-import settings so completions target the versioned subpaths.","Fix vite/webpack/tsconfig aliases or jest/vitest mappers that rewrite `@heroicons/vue/...` to the root entry.","Reinstall dependencies and clear the Vite dep-optimizer cache (`node_modules/.vite`) if stale resolution persists."],"exampleFix":"// before\nimport { BeakerIcon } from '@heroicons/vue'\n\n// after\nimport { BeakerIcon } from '@heroicons/vue/24/outline'","handlingStrategy":"validation","validationCode":"// Vue app boot-time check\nimport * as vueIcons from '@heroicons/vue'\nif (!vueIcons || !('BeakerIcon' in vueIcons)) {\n  throw new Error(\"Do not import from '@heroicons/vue'; use '@heroicons/vue/24/outline' etc.\")\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["ESLint no-restricted-imports banning the '@heroicons/vue' root specifier.","Fix Vite aliases and clear node_modules/.vite cache after upgrades.","Point editor auto-imports at '@heroicons/vue/<size>/<style>'.","Codemod icon imports on every heroicons major bump."],"tags":["import","module-resolution","breaking-change","vue"],"backgroundTag":"unsupported-root-import","analyzedSha":"616b7a4dbbf3d011760af8066262cd5c6b3868f3","analyzedAt":"2026-08-31T21:42:00.885Z","schemaVersion":2},"datasetVersion":"2026-08-31T22:30:34.772Z"}