{"record":{"id":"9903abc12e6d88d8","repo":"mobxjs/mobx","slug":"mobx-react-lite-render-property-of-forwardref","errorCode":null,"errorMessage":"[mobx-react-lite] `render` property of ForwardRef was not a function","messagePattern":"\\[mobx-react-lite\\] `render` property of ForwardRef was not a function","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/mobx-react-lite/src/observer.ts","lineNumber":64,"sourceCode":"    }\n\n    // The working of observer is explained step by step in this talk: https://www.youtube.com/watch?v=cPF4iBedoF0&feature=youtu.be&t=1307\n    if (isUsingStaticRendering()) {\n        return baseComponent\n    }\n\n    let useForwardRef = false\n    let render = baseComponent\n\n    const baseComponentName = baseComponent.displayName || baseComponent.name\n\n    // If already wrapped with forwardRef, unwrap,\n    // so we can patch render and apply memo\n    if (ReactForwardRefSymbol && baseComponent[\"$$typeof\"] === ReactForwardRefSymbol) {\n        useForwardRef = true\n        render = baseComponent[\"render\"]\n        if (typeof render !== \"function\") {\n            throw new Error(\n                `[mobx-react-lite] \\`render\\` property of ForwardRef was not a function`\n            )\n        }\n    }\n\n    let observerComponent = (props: any, ref: React.Ref<TRef>) => {\n        return useObserver(() => render(props, ref), baseComponentName)\n    }\n\n    // Inherit original name and displayName, see #3438\n    ;(observerComponent as React.FunctionComponent).displayName = baseComponent.displayName\n\n    if (isFunctionNameConfigurable) {\n        Object.defineProperty(observerComponent, \"name\", {\n            value: baseComponent.name,\n            writable: true,\n            configurable: true\n        })","sourceCodeStart":46,"sourceCodeEnd":82,"githubUrl":"https://github.com/mobxjs/mobx/blob/01211a698b64ea94de8e5f276ff8235fcf8ddf96/packages/mobx-react-lite/src/observer.ts#L46-L82","documentation":"When `observer` receives a component already wrapped in `React.forwardRef`, it unwraps it to patch the render function. This error throws when the extracted `baseComponent['render']` is not a function, meaning the forwardRef object is malformed or was not produced by `React.forwardRef` normally.","triggerScenarios":"Calling `observer()` on an object whose `$$typeof` is `Symbol(react.forwardRef)` but whose `.render` property is undefined or not a function (e.g. a hand-crafted or corrupted forwardRef-like object, or a destructured/cloned object that lost `render`).","commonSituations":"Manually faking forwardRef objects in tests; serializing/desherializing components across module boundaries; bundler or interop issues that mangle the render property.","solutions":["Ensure the component was created with `React.forwardRef((props, ref) => ...)` — do not hand-construct objects with a `$$typeof` forwardRef symbol.","Pass the original forwardRef component directly to `observer`; avoid spreading/cloning that drops the `render` property.","If you don't need ref forwarding, drop forwardRef and pass the plain function component to `observer`."],"exampleFix":"// before (malformed)\nconst C = { $$typeof: Symbol.for('react.forward_ref'), render: undefined }\nobserver(C)\n\n// after\nconst C = React.forwardRef((props, ref) => <div ref={ref} {...props} />)\nobserver(C)","handlingStrategy":"validation","validationCode":"function isForwardRef(Cmp) {\n  return Cmp && Cmp.$$typeof === Symbol.for('react.forward_ref')\n}\nfunction hasValidRender(Cmp) {\n  return !isForwardRef(Cmp) || typeof Cmp.render === 'function'\n}\nif (!hasValidRender(Cmp)) throw new TypeError('forwardRef component has no render function')","typeGuard":"const isForwardRefWithRender = (c) => !!c && c.$$typeof === Symbol.for('react.forward_ref') && typeof c.render === 'function'","tryCatchPattern":null,"preventionTips":["Always create forwardRef components with React.forwardRef, never hand-assemble objects with $$typeof.","Avoid spreading/cloning component objects, which can drop the render property.","In tests, use real React factories rather than mocks of forwardRef components."],"tags":["react","mobx-react-lite","forwardref","observer","invalid-argument"],"backgroundTag":"malformed-forwardref-component","analyzedSha":"01211a698b64ea94de8e5f276ff8235fcf8ddf96","analyzedAt":"2026-08-28T22:10:08.831Z","schemaVersion":2},"datasetVersion":"2026-08-29T02:17:18.158Z"}