[Bug]: <tr> cannot appear as a child of <table>

Question

[Bug]: <tr> cannot appear as a child of <table>

eneroth opened this issue 3 years ago · 19 comments

What happened?

As of 1.2.0, I'm getting this error when trying to inspect the DB:

<tr> cannot appear as a child of <table>. Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.

10x disappears/fails to render when this happens.

All cache has been cleared.

10x Version

1.2.0

Reagent Version

1.1.0

React Version

17.0.2

re-frame Version

1.2.0

What browsers are you seeing the problem on?

Firefox, Chrome

Relevant console output

Uncaught Error: function (this$,f){
var this$__$1 = this;
return cljs.core.swap_BANG_.cljs$core$IFn$_invoke$arity$2(this$__$1,f);
} is not ISeqable
    at Object.cljs$core$seq [as seq] (core.cljs:1253:20)
    at Function.eval [as cljs$core$IFn$_invoke$arity$variadic] (cljs_devtools.cljs:332:5)
    at eval (cljs_devtools.cljs:340:71)
    at eval (core.cljs:4400:25)
    at Function.G__94948__2 [as cljs$core$IFn$_invoke$arity$2] (core.cljs:4400:24)
    at eval (core.cljs:1528:24)
    at Function.eval [as cljs$core$IFn$_invoke$arity$4] (core.cljs:1528:23)
    at Object.eval [as cljs$core$IReduce$_reduce$arity$3] (core.cljs:1664:6)
    at Function.eval [as cljs$core$IFn$_invoke$arity$3] (core.cljs:2565:17)
    at Function.eval [as cljs$core$IFn$_invoke$arity$4] (core.cljs:2621:17)



react_devtools_backend.js:2540 Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table>. Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.
    at tr
    at table
    at li
    at ol
    at span
    at span
    at cmp (http://localhost:8090/js/cljs-runtime/day8.re_frame_10x.inlined_deps.reagent.v1v0v0.reagent.impl.component.js:508:43)
    at span
    at span
    at span
    at li
    at ol
    at span
    at span
    at cmp (http://localhost:8090/js/cljs-runtime/day8.re_frame_10x.inlined_deps.reagent.v1v0v0.reagent.impl.component.js:508:43)
    at span
    at span
    at div
    at cmp (http://localhost:8090/js/cljs-runtime/day8.re_frame_10x.inlined_deps.reagent.v1v0v0.reagent.impl.component.js:508:43)
    at cmp (http://localhost:8090/js/cljs-runtime/day8.re_frame_10x.inlined_deps.reagent.v1v0v0.reagent.impl.component.js:508:43)
    at div
    at cmp (http://localhost:8090/js/cljs-runtime/day8.re_frame_10x.inlined_deps.reagent.v1v0v0.reagent.impl.component.js:508:43)
    at div
    at cmp (http://localhost:8090/js/cljs-runtime/day8.re_frame_10x.inlined_deps.reagent.v1v0v0.reagent.impl.component.js:508:43)
    at div
    at cmp (http://localhost:8090/js/cljs-runtime/day8.re_frame_10x.inlined_deps.reagent.v1v0v0.reagent.impl.component.js:508:43)
    at cmp (http://localhost:8090/js/cljs-runtime/day8.re_frame_10x.inlined_deps.reagent.v1v0v0.reagent.impl.component.js:508:43)
    at div
    at cmp (http://localhost:8090/js/cljs-runtime/day8.re_frame_10x.inlined_deps.reagent.v1v0v0.reagent.impl.component.js:508:43)
    at cmp (http://localhost:8090/js/cljs-runtime/day8.re_frame_10x.inlined_deps.reagent.v1v0v0.reagent.impl.component.js:508:43)
    at div
    at cmp (http://localhost:8090/js/cljs-runtime/day8.re_frame_10x.inlined_deps.reagent.v1v0v0.reagent.impl.component.js:508:43)
    at cmp (http://localhost:8090/js/cljs-runtime/day8.re_frame_10x.inlined_deps.reagent.v1v0v0.reagent.impl.component.js:508:43)
    at div
    at cmp (http://localhost:8090/js/cljs-runtime/day8.re_frame_10x.inlined_deps.reagent.v1v0v0.reagent.impl.component.js:508:43)
    at cmp (http://localhost:8090/js/cljs-runtime/day8.re_frame_10x.inlined_deps.reagent.v1v0v0.reagent.impl.component.js:508:43)
    at div
    at cmp (http://localhost:8090/js/cljs-runtime/day8.re_frame_10x.inlined_deps.reagent.v1v0v0.reagent.impl.component.js:508:43)
    at cmp (http://localhost:8090/js/cljs-runtime/day8.re_frame_10x.inlined_deps.reagent.v1v0v0.reagent.impl.component.js:508:43)
    at div
    at cmp (http://localhost:8090/js/cljs-runtime/day8.re_frame_10x.inlined_deps.reagent.v1v0v0.reagent.impl.component.js:508:43)
    at div
    at cmp (http://localhost:8090/js/cljs-runtime/day8.re_frame_10x.inlined_deps.reagent.v1v0v0.reagent.impl.component.js:508:43)
    at cmp (http://localhost:8090/js/cljs-runtime/day8.re_frame_10x.inlined_deps.reagent.v1v0v0.reagent.impl.component.js:508:43)
    at cmp (http://localhost:8090/js/cljs-runtime/day8.re_frame_10x.inlined_deps.reagent.v1v0v0.reagent.impl.component.js:508:43)
    at cmp (http://localhost:8090/js/cljs-runtime/day8.re_frame_10x.inlined_deps.reagent.v1v0v0.reagent.impl.component.js:508:43)
overrideMethod	@	react_devtools_backend.js:2540
printWarning	@	react-dom.development.js:68
error$jscomp$0	@	react-dom.development.js:44
validateDOMNesting	@	react-dom.development.js:10082
completeWork	@	react-dom.development.js:10182
completeUnitOfWork	@	react-dom.development.js:22816
performUnitOfWork	@	react-dom.development.js:22788
workLoopSync	@	react-dom.development.js:22708
renderRootSync	@	react-dom.development.js:22671
performSyncWorkOnRoot	@	react-dom.development.js:22294
eval	@	react-dom.development.js:11328
exports.unstable_runWithPriority	@	scheduler.development.js:469
runWithPriority$1	@	react-dom.development.js:11277
flushSyncCallbackQueueImpl	@	react-dom.development.js:11323
flushSyncCallbackQueue	@	react-dom.development.js:11310
scheduleUpdateOnFiber	@	react-dom.development.js:21894
enqueueForceUpdate	@	react-dom.development.js:12505
Component.forceUpdate	@	react.development.js:385
day8$re_frame_10x$inlined_deps$reagent$v1v0v0$reagent$impl$batching$run_queue	@	batching.cljs:39
eval	@	batching.cljs:88
eval	@	batching.cljs:98
eval	@	batching.cljs:78
G__97115	@	batching.cljs:59
requestAnimationFrame (async)		
eval	@	batching.cljs:59
day8$re_frame_10x$inlined_deps$reagent$v1v0v0$reagent$impl$batching$schedule	@	batching.cljs:125
day8$re_frame_10x$inlined_deps$reagent$v1v0v0$reagent$ratom$rea_enqueue	@	ratom.cljs:122
eval	@	ratom.cljs:401
day8$re_frame_10x$inlined_deps$reagent$v1v0v0$reagent$ratom$handle_reaction_change	@	ratom.cljs:347
day8$re_frame_10x$inlined_deps$reagent$v1v0v0$reagent$ratom$notify_w	@	ratom.cljs:106
eval	@	ratom.cljs:148
cljs$core$_reset_BANG_	@	core.cljs:866
cljs$core$reset_BANG_	@	core.cljs:4511
eval	@	fx.cljc:185
day8$re_frame_10x$inlined_deps$re_frame$v1v1v2$re_frame$fx$do_fx_after	@	fx.cljc:56
day8$re_frame_10x$inlined_deps$re_frame$v1v1v2$re_frame$interceptor$invoke_interceptor_fn	@	interceptor.cljc:70
day8$re_frame_10x$inlined_deps$re_frame$v1v1v2$re_frame$interceptor$invoke_interceptors	@	interceptor.cljc:108
day8$re_frame_10x$inlined_deps$re_frame$v1v1v2$re_frame$interceptor$execute	@	interceptor.cljc:201
day8$re_frame_10x$inlined_deps$re_frame$v1v1v2$re_frame$events$handle	@	events.cljc:65
eval	@	router.cljc:179
eval	@	router.cljc:198
eval	@	router.cljc:146
eval	@	router.cljc:169
G__98079	@	router.cljc:187
channel.port1.onmessage	@	nexttick.js:214

Answer 1 · 2021-11-15T18:48:34.000Z

@eneroth I am having trouble reproducing this issue with the data I pass to devtools.
I suspect this is as a result of an issue in the json-ml returned by devtools and not in re-frame-10x rendering of the json-ml. I however can not get devtools to return a table as the json-ml data.
Could you please share the original data that was passed to devtools and specifically around where devtools returned the table or the structure of the data in the form {:key [int {:another-key #{int char}}].
This will be very helpful in reproducing the issue.

Answer 2 · 2021-11-16T10:03:15.000Z

@eneroth I am having trouble reproducing this issue with the data I pass to devtools. I suspect this is as a result of an issue in the json-ml returned by devtools and not in re-frame-10x rendering of the json-ml. I however can not get devtools to return a table as the json-ml data. Could you please share the original data that was passed to devtools and specifically around where devtools returned the table or the structure of the data in the form {:key [int {:another-key #{int char}}]. This will be very helpful in reproducing the issue.

I'd be happy to! Could you point me in the correct direction to extract this data? After fiddling around with breakpoints for an hour or so, I got pretty much nowhere.

My next shot was to log all calls to jsonml->hiccup, for which I tried to translate the project.clj to deps.edn in order to add it as a :local/root in our project, but I'm getting stuck at day8.re-frame-10x.inlined-deps.reagent.v1v0v0.reagent.core being a dependency that it can't find.

Answer 3 · 2021-11-16T10:18:38.000Z

Thank you. If you can see the jsonml->hiccup function, find the first function to call jsonml->hiccup which should be simple-render-with-path-annotations if you are watching the app-db panel.

The first argument to simple-render-with-path-annotations (alias data) would be very helpful.

EDIT:
If you have not installed re-frame-10x locally, you can get this data as db and log it in any subscription that you add as follows.

(reframe.core/reg-sub
  ::example
  (fn [db _]
    db))

or in an event:

(reframe.core/reg-event-db
  ::example
  []
  (fn [db _]
    (println db)
    db))

Answer 4 · 2021-12-03T22:30:19.000Z

I'm also hitting this error. If there's anything I can do to help fix it, please let me know.

Answer 5 · 2021-12-04T06:42:45.000Z

@paulbutcher can you please share the data you used to get this error? I am having issues reproducing this issue with the data I pass to devtools.
I have commented on how to get the target data here #331 (comment) .
Thanks.

Answer 6 · 2021-12-04T09:37:59.000Z

This is an app-db which reproduces the problem:

{:layout :Driver, :loading true, :current-route #reitit.core.Match{:template "/", :data {:coercion #object[reitit.coercion.spec.t_reitit$coercion$spec22365], :name :root, :view #object[race_and_improve$views$splash$splash]}, :result nil, :path-params {}, :path "/", :query-params {}, :parameters {:path {}, :query {}}, :controllers []}}

Shout if there's anything else that would help.

Answer 7 · 2021-12-04T09:42:11.000Z

This will be very helpful. I will proceed with reproducing the issue again.
Thank you.

Answer 8 · 2021-12-04T09:44:02.000Z

I can probably create a cut-down version of my app which reproduces it if you can't get there with just the app-db. Let me know if you would like me to do this.

Answer 9 · 2021-12-09T17:43:03.000Z

@paulbutcher just confirming if this is the data that is sent to devtools. I have managed to run the code, though without the sections in # like #reitit.core.Match , #object[reitit.coercion.spec.t_reitit$coercion$spec22365] and #object[race_and_improve$views$splash$splash]
i.e

{:layout :Driver, :loading true, :current-route {:template "/", :data {:name :root}, :result nil, :path-params {}, :path "/", :query-params {}, :parameters {:path {}, :query {}}, :controllers []}}

Are these excluded sections supposed to evaluate to other objects like sequences, maps, numbers or strings?

Answer 10 · 2021-12-09T17:46:17.000Z

They're related to the https://github.com/metosin/reitit routing library.

I guess the easiest thing would be for me to create a cut-down version of my app for you to play with. I'll try to get something together 👍

Answer 11 · 2021-12-09T18:12:50.000Z

Okay, sounds great. Thanks.

Answer 12 · 2021-12-09T18:28:13.000Z

Here you go, this seems to do the trick:

https://github.com/paulbutcher/rf10x-bug

This is a project built from the re-frame template with enough of the project I'm working on added to reproduce. Shout if you have any problems.

Answer 13 · 2021-12-09T18:29:31.000Z

Okay, I am reproducing this now.

Answer 14 · 2021-12-09T18:51:40.000Z

I can now reproduce this issue as well. That should be helpful. Thank you.

Answer 15 · 2021-12-09T18:58:15.000Z

Welcome 👍. Let me know if there's anything I can do to help.

Answer 16 · 2021-12-15T09:33:21.000Z

I shall edit this issue soon because after investigating further, it seems that the error that causes the website to crash is about an issue on the 10x rendering and not because of tr not being a child of tbody. Infact, <tr> cannot appear as a child of <table> is also printed in re-frame version 1.1.13.
The error <tr> cannot appear as a child of <table> is thrown because the object we get from devtools has the following structure;

Note that the table does not have a tbody.

The exact error that causes this must be in the rendering of jsonml that devtools sends back and specifically within reitit tables.

Answer 17 · 2021-12-15T17:59:35.000Z

Thanks @MawiraIke 👍

Does this imply that it's a bug in Clojure DevTools? In which case I guess we should raise a ticket there?

Thanks for your perseverance with this!

Answer 18 · 2021-12-16T05:20:29.000Z

@paulbutcher I'm not sure yet. I'm yet to find where in the code the functionality breaks.

Answer 19 · 2021-12-18T17:41:54.000Z

Seems like this issue was due to relying on devtools path to be unique while it seems like its not so correct within reitit objects like Coercion- #object[reitit.coercion.spec.t_reitit$coercion$spec22365]
I am attaching a PR that fixes this issue below.