{"record":{"id":"e6d396a1ad66eb37","repo":"tailwindlabs/heroicons","slug":"importing-from-heroicons-vue-directly-is-not-su-e6d396","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.js","lineNumber":11,"sourceCode":"// The only reason this file exists is to appease Vite's optimizeDeps feature which requires a root-level import.\n\nmodule.exports = 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.js#L1-L17","documentation":"CJS counterpart of the Vue root guard: `@heroicons/vue/index.js` is a Proxy that throws on any property access. Heroicons v2 for Vue requires size/style subpath imports; the root entry exists only to fail loudly with guidance.","triggerScenarios":"`const { BeakerIcon } = require('@heroicons/vue')` or an ESM import that Node resolves through the CJS root entry, followed by property access. The Proxy get trap throws for everything except `__esModule`.","commonSituations":"Nuxt/Node SSR or test environments resolving the CJS main entry; CommonJS-based Vue toolchains; v1-era code after upgrading; bundler configurations ignoring package `exports`.","solutions":["Use a subpath import: `import { BeakerIcon } from '@heroicons/vue/24/solid'` (or the matching require form).","Update resolver/test config (moduleNameMapper, aliases) so subpath imports resolve to the subpath builds.","Ensure the runtime honors package `exports` so the CJS root is only hit by genuine root imports.","Grep the codebase for `from '@heroicons/vue'` / `require('@heroicons/vue')` and migrate each occurrence."],"exampleFix":"// before\nconst { BeakerIcon } = require('@heroicons/vue')\n\n// after\nconst { BeakerIcon } = require('@heroicons/vue/24/solid')","handlingStrategy":"validation","validationCode":"// CJS/SSR guard\nconst mod = require('@heroicons/vue')\nif (!mod || typeof mod !== 'object' || Object.keys(mod).length === 0) {\n  throw new Error(\"Root require of '@heroicons/vue' is unsupported; require '@heroicons/vue/24/solid' etc.\")\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Ban root requires in Nuxt/Node server code via lint rules.","Ensure the runtime/bundler respects package.json exports.","Grep CI for require('@heroicons/vue') to catch regressions.","Update test-runner moduleNameMapper entries when upgrading heroicons."],"tags":["import","commonjs","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"}