{"record":{"id":"12725ed89b85f3ce","repo":"mobxjs/mobx","slug":"mobx-react-class-component-displayname-is-m","errorCode":null,"errorMessage":"[mobx-react] class component (${displayName}) is missing `render` method.\n`observer` requires `render` being a function defined on prototype.\n`render = () => {}` or `render = function() {}` is not supported.","messagePattern":"\\[mobx-react\\] class component \\((.+?)\\) is missing `render` method\\.\n`observer` requires `render` being a function defined on prototype\\.\n`render = \\(\\) => (.+?)` or `render = function\\(\\) (.+?)` is not supported\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/mobx-react/src/observerClass.ts","lineNumber":90,"sourceCode":"    if (componentClass[\"__proto__\"] !== PureComponent) {\n        if (!prototype.shouldComponentUpdate) {\n            prototype.shouldComponentUpdate = observerSCU\n        } else if (prototype.shouldComponentUpdate !== observerSCU) {\n            // n.b. unequal check, instead of existence check, as @observer might be on superclass as well\n            throw new Error(\n                \"It is not allowed to use shouldComponentUpdate in observer based components.\"\n            )\n        }\n    }\n\n    if (__DEV__) {\n        Object.defineProperties(prototype, observablePropDescriptors)\n    }\n\n    const originalRender = prototype.render\n    if (typeof originalRender !== \"function\") {\n        const displayName = getDisplayName(componentClass)\n        throw new Error(\n            `[mobx-react] class component (${displayName}) is missing \\`render\\` method.` +\n                `\\n\\`observer\\` requires \\`render\\` being a function defined on prototype.` +\n                `\\n\\`render = () => {}\\` or \\`render = function() {}\\` is not supported.`\n        )\n    }\n\n    prototype.render = function () {\n        Object.defineProperty(this, \"render\", {\n            // There is no safe way to replace render, therefore it's forbidden.\n            configurable: false,\n            writable: false,\n            value: isUsingStaticRendering()\n                ? originalRender\n                : createReactiveRender.call(this, originalRender)\n        })\n        return this.render()\n    }\n","sourceCodeStart":72,"sourceCodeEnd":108,"githubUrl":"https://github.com/mobxjs/mobx/blob/01211a698b64ea94de8e5f276ff8235fcf8ddf96/packages/mobx-react/src/observerClass.ts#L72-L108","documentation":"mobx-react's observer patches `prototype.render` to set up the tracking reaction, so `render` must be a regular function defined on the class prototype. If `prototype.render` is not a function — missing entirely, or defined as a class property/instance arrow function that observer cannot patch reliably — it throws with the display name and guidance.","triggerScenarios":"Forgetting to define a render method; defining `render = () => {...}` as a class instance property (arrow-function class field) or `render = function() {...}` as a field, so it is not a prototype method; a typo like `rendor` leaving prototype.render undefined.","commonSituations":"TS/Babel class-properties style where render is written as an arrow function field; refactor removing render accidentally; copying store classes that have no render and decorating them with @observer.","solutions":["Define render as a normal prototype method: `render() { return ... }` inside the class body.","If you prefer arrow functions, bind in the constructor instead (`this.render = this.render.bind(this)`) while keeping `render()` a prototype method.","Check the class actually extends React.Component/PureComponent and that render isn't misspelled or deleted."],"exampleFix":"// before\nclass View extends React.Component {\n  render = () => <div>{this.props.value}</div>\n}\nexport default observer(View) // throws\n\n// after\nclass View extends React.Component {\n  render() { return <div>{this.props.value}</div> }\n}\nexport default observer(View)","handlingStrategy":"validation","validationCode":"if (typeof MyClass.prototype.render !== 'function') {\n  throw new Error('Class must define render as a prototype method (not an arrow-function field) before observer')\n}","typeGuard":"const hasPrototypeRender = (c) => typeof c?.prototype?.render === 'function' &&\n  Object.prototype.hasOwnProperty.call(c.prototype, 'render') &&\n  !Object.getOwnPropertyDescriptor(c.prototype, 'render').value.toString().includes('=>')","tryCatchPattern":"try {\n  Observed = observer(MyClass)\n} catch (e) {\n  if (String(e.message).includes('missing `render` method')) {\n    // fix the class: convert render to a prototype method, then retry\n  }\n  throw e\n}","preventionTips":["Always declare render as a regular method: `render() { ... }`, never as a class-property arrow function in observer components.","Ensure every @observer class extends React.Component/PureComponent and implements render.","Add a unit test that renders each observer class to catch missing/misdefined render early.","Configure Babel/TS so class fields don't silently shadow prototype methods where this matters."],"tags":["mobx-react","observer","class-component","render","api-misuse"],"backgroundTag":"missing-render-method","analyzedSha":"01211a698b64ea94de8e5f276ff8235fcf8ddf96","analyzedAt":"2026-08-28T22:10:08.831Z","schemaVersion":2},"datasetVersion":"2026-08-29T02:17:18.158Z"}