Programmer. Hiker. Cook. Always looking for interesting problems to solve.
03 Aug 2014 |
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
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
Easy crime to commit if you’re moving some html tags around and leave one behind. GitHub issue.
Reading application state during user input, e.g. onClick, onChange. etc.
Uncaught Error: Cannot manipulate cursor outside of render phase, only om.core/transact!, om.core/update!, and cljs.core/deref operations allowed.
You need to deref to read the value:
Same error as above but coming from your
Common mistake in the function that you pass to
om/transact! is to do something like this:
(om/transact! data :messages (fn [cursor] (conj (:messages data) some-value))
Cursor is actually your
(: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
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.
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. Starting from React 0.11.0 you are free to return null. Thanks @locks for pointing this out!</li> </ol>
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.