{"record":{"id":"b1389424c2cfd445","repo":"tailwindlabs/heroicons","slug":"you-re-trying-to-import-heroicons-react-outline","errorCode":null,"errorMessage":"You're trying to import `@heroicons/react/outline/${property}` from Heroicons v1 but have installed Heroicons v2. Install `@heroicons/react@v1` to resolve this error.","messagePattern":"You're trying to import `@heroicons/react/outline/(.+?)` from Heroicons v1 but have installed Heroicons v2\\. Install `@heroicons/react@v1` to resolve this error\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"react/outline/index.js","lineNumber":9,"sourceCode":"let proxy = new Proxy(\n  {},\n  {\n    get: (obj, property) => {\n      if (property === '__esModule') {\n        return {}\n      }\n\n      throw new Error(\n        `You\\'re trying to import \\`@heroicons/react/outline/${property}\\` from Heroicons v1 but have installed Heroicons v2. Install \\`@heroicons/react@v1\\` to resolve this error.`\n      )\n    },\n  }\n)\n\nmodule.exports = proxy\n","sourceCodeStart":1,"sourceCodeEnd":17,"githubUrl":"https://github.com/tailwindlabs/heroicons/blob/616b7a4dbbf3d011760af8066262cd5c6b3868f3/react/outline/index.js#L1-L17","documentation":"In Heroicons v1, icons lived at `@heroicons/react/outline/<Icon>` and `@heroicons/react/solid/<Icon>`. In v2 these paths are compatibility shims implemented as throwing Proxies. Accessing any icon through `@heroicons/react/outline` means the code still uses the v1 import layout while the installed package is v2.","triggerScenarios":"Any import such as `import BeakerIcon from '@heroicons/react/outline/BeakerIcon'` or `require('@heroicons/react/outline/BeakerIcon')` against heroicons v2. The `outline/index.js` Proxy get trap throws with the interpolated icon name (`${property}`).","commonSituations":"Following v1 documentation or tutorials after `npm install @heroicons/react` installed v2; dependency upgrades (semver-major mismatch not noticed); code generators or design-system wrappers hardcoding `outline/` paths; stale lockfiles partially upgraded.","solutions":["Rewrite the import to a v2 subpath: `import { BeakerIcon } from '@heroicons/react/24/outline'`.","Alternatively pin v1 if the codebase depends on v1 layout and API: `npm install @heroicons/react@v1`.","Run a find/replace for `@heroicons/react/outline/<Name>` and `@heroicons/react/solid/<Name>` imports across the repo.","Check transitive dependencies or shared UI libraries that still emit v1-style import paths and upgrade them."],"exampleFix":"// before\nimport BeakerIcon from '@heroicons/react/outline/BeakerIcon'\n\n// after\nimport { BeakerIcon } from '@heroicons/react/24/outline'","handlingStrategy":"validation","validationCode":"// detect v1-style imports before build\nconst pkg = require('@heroicons/react/package.json')\nif (pkg.version.startsWith('2.') && process.env.HEROICONS_V1_IMPORTS === '1') {\n  throw new Error('Codebase still uses @heroicons/react/outline/<Icon> v1 imports with heroicons v2 installed')\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Pin the heroicons major version in package.json (e.g. '^2.0.0') and commit the lockfile.","Run a find/replace or codemod for '/outline/<Icon>' imports when upgrading to v2.","Add a CI grep step that fails on '@heroicons/react/outline/' import paths under v2.","Update internal UI libraries that emit v1-style import paths."],"tags":["import","version-mismatch","breaking-change","migration","react"],"backgroundTag":"heroicons-v1-v2-import-mismatch","analyzedSha":"616b7a4dbbf3d011760af8066262cd5c6b3868f3","analyzedAt":"2026-08-31T21:42:00.885Z","schemaVersion":2},"datasetVersion":"2026-08-31T22:30:34.772Z"}