For the past few months I’ve been creating various Om components and most of the time it goes smoothly. But sometimes I do something silly, and it’s not always obvious what it is. What’s obvious is that the UI doesn’t work and throws (sometimes cryptic) errors at me instead. Today I’m gathering what I remember into a tiny post. Maybe someone will find it helpful. And maybe I’ll finally remember those mistakes after putting them down on
paper interwebs. One can hope!
- Form inside of another form.
Easy crime to commit if you’re moving some html tags around and leave one behind.
Error: Invariant Violation: findComponentRoot(..., .2): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables or nesting <p> or <a> tags. Try inspecting the child nodes of the element with React ID ``.
GitHub issue here.
- Reading application state during user input, e.g. onClick, onChange. etc.
You need to deref to read the value:
Uncaught Error: Cannot manipulate cursor outside of render phase, only om.core/transact!, om.core/update!, and cljs.core/deref operations allowed.
- Same error as above but coming from your om/transact!
Common mistake in the function that you pass to om/transact! is to do something like this:
Cursor is actually your
(om/transact! data :messages (fn [cursor] (conj (:messages data) some-value))
(:messages data)so you just do:
(fn [cursor] (conj cursor some-value))
- React.js < v. 0.11.0 Render method not returning a valid component
You *must* return a single div. It might contain nested stuff, other divs, components, etc. but everything must be wrapped in a single div. And if you want to return nothing because you have no data to display, you still need to return an empty div from your render method.
Uncaught Error: Invariant Violation: ReactCompositeComponent.render(): A valid ReactComponent must be returned. You may have returned null, undefined, an array, or some other invalid object.
Starting from React 0.11.0 you are free to return null. Thanks @locks for pointing this out!
And an obvious tip: don’t use a minified build of React library for development if you want to see meaningful error descriptions.
I’ll add more pitfalls as I remember them.