{"record":{"id":"3b0218505147566d","repo":"tailwindlabs/heroicons","slug":"importing-from-heroicons-react-directly-is-not-3b0218","errorCode":null,"errorMessage":"Importing from `@heroicons/react` directly is not supported. Please import from either `@heroicons/react/16/solid`, `@heroicons/react/20/solid`, `@heroicons/react/24/solid`, or `@heroicons/react/24/outline` instead.","messagePattern":"Importing from `@heroicons/react` directly is not supported\\. Please import from either `@heroicons/react/16/solid`, `@heroicons/react/20/solid`, `@heroicons/react/24/solid`, or `@heroicons/react/24/outline` instead\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"react/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/react\\` directly is not supported. Please import from either \\`@heroicons/react/16/solid\\`, \\`@heroicons/react/20/solid\\`, \\`@heroicons/react/24/solid\\`, or \\`@heroicons/react/24/outline\\` instead.`\n      )\n    },\n  }\n)\n","sourceCodeStart":1,"sourceCodeEnd":17,"githubUrl":"https://github.com/tailwindlabs/heroicons/blob/616b7a4dbbf3d011760af8066262cd5c6b3868f3/react/index.js#L1-L17","documentation":"Identical to the ESM variant: the CommonJS entry `@heroicons/react/index.js` is a Proxy that throws on any property access. Heroicons v2 requires importing icons from the size/style subpaths (`16/solid`, `20/solid`, `24/solid`, `24/outline`) instead of the package root.","triggerScenarios":"`require('@heroicons/react')` followed by destructuring or property access (e.g. `const { BeakerIcon } = require('@heroicons/react')`), or an ESM named import that Node resolves to the CJS root entry via interop. The Proxy get trap throws for every property except `__esModule`.","commonSituations":"Node CJS projects or test runners (Jest/Vitest with CJS transform) resolving the package to its main CJS entry; SSR/server code importing icons by the bare package name; editor auto-imports targeting the root; v1-era code after upgrading to v2.","solutions":["Rewrite requires/imports to a subpath: `const { BeakerIcon } = require('@heroicons/react/24/solid')` or `import { BeakerIcon } from '@heroicons/react/24/solid'`.","If a tool resolved the CJS entry unexpectedly, prefer the ESM build or update the resolver config (jest moduleNameMapper, bundler mainFields) so subpath exports are honored.","Audit auto-import settings/snippets so completions point at `@heroicons/react/<size>/<style>`.","Ensure package.json `exports` of heroicons v2 is respected (Node >= 12.16 / bundler with exports support)."],"exampleFix":"// before\nconst { BeakerIcon } = require('@heroicons/react')\n\n// after\nconst { BeakerIcon } = require('@heroicons/react/24/solid')","handlingStrategy":"validation","validationCode":"// guard CJS entry usage\nconst mod = require('@heroicons/react')\nif (!mod || typeof mod !== 'object' || Object.keys(mod).length === 0) {\n  throw new Error(\"Root require of '@heroicons/react' is unsupported; require '@heroicons/react/24/solid' etc.\")\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Ban root requires via lint rules (no-restricted-imports / node patterns).","Keep Jest/Vitest moduleNameMapper entries mapping heroicons subpaths to their real builds.","Prefer ESM builds where possible so subpath exports are honored.","Grep CI for require('@heroicons/react') to catch regressions."],"tags":["import","commonjs","module-resolution","breaking-change","react"],"backgroundTag":"unsupported-root-import","analyzedSha":"616b7a4dbbf3d011760af8066262cd5c6b3868f3","analyzedAt":"2026-08-31T21:42:00.885Z","schemaVersion":2},"datasetVersion":"2026-08-31T22:30:34.772Z"}