{"record":{"id":"d440bdc0e71d4e7f","repo":"facebook/docusaurus","slug":"wrong-icon-icon","errorCode":null,"errorMessage":"Wrong icon: ${icon}","messagePattern":"Wrong icon: (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/docusaurus-plugin-ideal-image/src/theme/IdealImage/index.tsx","lineNumber":79,"sourceCode":"        description: 'When the user is viewing an offline document',\n      });\n    case 'error': {\n      const {loadInfo} = state;\n      if (loadInfo === 404) {\n        return translate({\n          id: 'theme.IdealImageMessage.404error',\n          message: '404. Image not found',\n          description: 'When the image is not found',\n        });\n      }\n      return translate({\n        id: 'theme.IdealImageMessage.error',\n        message: 'Error. Click to reload',\n        description: 'When the image fails to load for unknown error',\n      });\n    }\n    default:\n      throw new Error(`Wrong icon: ${icon}`);\n  }\n}\n\nexport default function IdealImage(props: Props): ReactNode {\n  const {img, ...propsRest} = props;\n\n  // In dev env just use regular img with original file\n  if (typeof img === 'string' || 'default' in img) {\n    return (\n      // eslint-disable-next-line jsx-a11y/alt-text\n      <img src={typeof img === 'string' ? img : img.default} {...propsRest} />\n    );\n  }\n\n  return (\n    <ReactIdealImage\n      {...propsRest}\n      height={img.src.height ?? 100}","sourceCodeStart":61,"sourceCodeEnd":97,"githubUrl":"https://github.com/facebook/docusaurus/blob/3f483e80e326cc646b54b83d564b3f0c4881b9a6/packages/docusaurus-plugin-ideal-image/src/theme/IdealImage/index.tsx#L61-L97","documentation":"Thrown by the IdealImage plugin's icon-state switch when it receives an `icon` value that is not one of the handled cases ('loading', 'loaded', 'error', '404'). The switch is meant to be exhaustive over the component's internal UI states, so reaching `default` indicates either an internal logic bug or a corrupted state machine. This is a defensive exhaustiveness guard, not a user-facing validation.","triggerScenarios":"The IdealImage component derives an `icon` string from its loading lifecycle. If a caller of the internal ` IdealImageMessage` / status helper passes a status string outside the known set, or if a future refactor adds a new state without extending the switch, the default branch fires.","commonSituations":"Swizzling `@theme/IdealImage` and passing a custom status string into the message helper; upgrading `@docusaurus/plugin-ideal-image` to a version whose lifecycle emits a new state while a stale swizzled component still has the old switch; type-system bypass (any-cast) hiding an unknown value at compile time.","solutions":["Inspect the thrown `icon` value in the error message; it is almost always a typo or a new state name your swizzled copy does not know about.","If you swizzled `theme/IdealImage`, re-run the swizzle diff against the upstream version and add the missing case to the switch.","If the value comes from your own wrapper, ensure you only pass one of the documented statuses ('loading', 'loaded', 'error', '404').","Avoid casting the icon to `any`; let TypeScript narrow it so the compiler flags missing cases."],"exampleFix":"// before\nfunction getStatusMessage(icon: string) {\n  switch (icon) {\n    case 'loading': return translate({...});\n    // ... missing 'loaded' case\n    default: throw new Error(`Wrong icon: ${icon}`);\n  }\n}\n// after\ntype IdealImageIcon = 'loading' | 'loaded' | 'error' | '404';\nfunction getStatusMessage(icon: IdealImageIcon) {\n  switch (icon) {\n    case 'loading': return translate({...});\n    case 'loaded':  return translate({...});\n    case 'error':   return translate({...});\n    case '404':     return translate({...});\n    default: { const _: never = icon; throw new Error(`Wrong icon: ${icon}`); }\n  }\n}","handlingStrategy":"type-guard","validationCode":"const KNOWN_ICONS = new Set(['loading','loaded','error','404']);\nfunction assertIcon(icon: string): void {\n  if (!KNOWN_ICONS.has(icon)) {\n    throw new TypeError(`Unsupported icon: ${icon}. Expected one of ${[...KNOWN_ICONS].join(', ')}`);\n  }\n}","typeGuard":"type IdealImageIcon = 'loading' | 'loaded' | 'error' | '404';\nfunction isIdealImageIcon(v: unknown): v is IdealImageIcon {\n  return typeof v === 'string' && ['loading','loaded','error','404'].includes(v);\n}","tryCatchPattern":null,"preventionTips":["Type the icon parameter as a literal union, not `string`, so TS catches missing cases.","Use a `never`-narrowed default branch to get compile-time exhaustiveness checks.","Re-swizzle against upstream after upgrading the ideal-image plugin."],"tags":["react","switch-exhaustiveness","ideal-image","typescript"],"backgroundTag":null,"analyzedSha":"3f483e80e326cc646b54b83d564b3f0c4881b9a6","analyzedAt":"2026-08-12T13:25:04.382Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}