{"record":{"id":"c508dc7a5d0c17a7","repo":"swagger-api/swagger-ui","slug":"need-a-string-to-fetch-a-component-was-given-a","errorCode":null,"errorMessage":"Need a string, to fetch a component. Was given a ${typeof componentName}","messagePattern":"Need a string, to fetch a component\\. Was given a (.+?)","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"src/core/plugins/view/root-injects.jsx","lineNumber":94,"sourceCode":"      return <WrappedComponent {...cleanProps} />\n    }\n  }\n  WithMappedContainer.displayName = `WithMappedContainer(${fn.getDisplayName(WrappedComponent)})`\n  return WithMappedContainer\n}\n\nexport const render = (getSystem, getStore, getComponent, getComponents) => (domNode) => {\n  const App = getComponent(getSystem, getStore, getComponents)(\"App\", \"root\")\n  const { createRoot } = ReactDOM\n  const root = createRoot(domNode)\n\n  root.render(<App/>)\n}\n\nexport const getComponent = (getSystem, getStore, getComponents) => (componentName, container, config = {}) => {\n\n  if (typeof componentName !== \"string\")\n    throw new TypeError(\"Need a string, to fetch a component. Was given a \" + typeof componentName)\n\n    // getComponent has a config object as a third, optional parameter\n    // using the config object requires the presence of the second parameter, container\n    // e.g. getComponent(\"JsonSchema_string_whatever\", false, { failSilently: true })\n  const component = getComponents(componentName)\n\n  if (!component) {\n    if (!config.failSilently) {\n      getSystem().log.warn(\"Could not find component:\", componentName)\n    }\n    return null\n  }\n\n  if(!container) {\n    return component\n  }\n\n  if(container === \"root\") {","sourceCodeStart":76,"sourceCodeEnd":112,"githubUrl":"https://github.com/swagger-api/swagger-ui/blob/3d9d0916d4c0542c50639a9a0e680ab1475683a6/src/core/plugins/view/root-injects.jsx#L76-L112","documentation":"getComponent is a curried factory (src/core/plugins/view/root-injects.jsx:91) that resolves a registered component by its string name from the Swagger UI system's component registry. It throws a TypeError when the first argument is not a string, because the registry is keyed by component names. The second argument is a container flag (\"root\" | truthy | falsy) and the third is an optional config object such as { failSilently: true }.","triggerScenarios":"Calling the inner resolver with a non-string, e.g. getComponent(...)(undefined), getComponent(...)(SomeReactClass), or getComponent(...)(42); passing a config object as the first argument; mistaking the outer factory for the resolver and calling getComponent(SomeComponent); a plugin overriding getComponent and forwarding a non-string value.","commonSituations":"Custom code calling system.getComponent with a component reference instead of its registered name; destructure mistakes (const { getComponent } = system; getComponent(MyComp)); porting from an older API where argument order or currying differed; React wrappers forwarding positional props into the resolver.","solutions":["Pass the registered component name as a string: getComponent(\"Operation\", \"root\").","Check the registry first with getComponents() to confirm the exact registered name.","For optional lookups pass { failSilently: true } as the third argument to get null instead of a warning — but the name must still be a string.","Remember getComponent is curried: the outer call takes (getSystem, getStore, getComponents) and returns the resolver; do not swap the two call sites."],"exampleFix":"// before\nconst Comp = getComponent(SomeReactComponent, \"root\")\n\n// after\nconst Comp = getComponent(\"Operation\", \"root\")\n// or, for an optional lookup:\nconst Maybe = getComponent(\"MaybeMissing\", true, { failSilently: true })","handlingStrategy":"type-guard","validationCode":"// Ensure the name is a non-empty string before resolving.\nconst name = possiblyName\nif (typeof name !== \"string\" || name.length === 0) {\n  throw new Error(`component name must be a non-empty string, got ${typeof name}`)\n}\nconst Comp = getComponent(name, true, { failSilently: true })","typeGuard":"// Narrows a value to a valid registered component name.\nconst isComponentName = (v) => typeof v === \"string\" && v.length > 0","tryCatchPattern":"let Comp\ntry {\n  Comp = getComponent(name, \"root\")\n} catch (e) {\n  if (/Need a string, to fetch a component/.test(e.message)) {\n    console.error(\"getComponent needs a registered component name string; got:\", name)\n    Comp = null\n  } else {\n    throw e\n  }\n}","preventionTips":["Always pass the registered string name, never a component reference or object.","Use { failSilently: true } as the third argument for optional lookups.","Remember getComponent is curried: outer (getSystem, getStore, getComponents) => inner (name, container, config)."],"tags":["components","plugin-system","currying","developer-error"],"backgroundTag":null,"analyzedSha":"3d9d0916d4c0542c50639a9a0e680ab1475683a6","analyzedAt":"2026-08-13T10:03:12.308Z","schemaVersion":2},"datasetVersion":"2026-08-13T14:17:21.547Z"}