[Bug]: Mousing over events tab causes panel to crash

eggsyntax commented 1 year ago

What happened?

This issue may be related to #346, but a) the error message is different, and b) I'm using shadow-cljs rather than any version of figwheel.

If I open the 10x panel to the Events tab, and then move the mouse up and down between the fn-traced and the lower part, the panel crashes and disappears, leaving errors in the JS console.

Some things that didn't solve it:

Excluding highlight.js and requiring an updated version via cljsjs
Excluding highlight.js and requiring an updated version via package.json
Removing our package.json require of highlight.js entirely (we need to require it for unrelated purposes, and do so at version 11.1.0)
Excluding highlight.js and requiring an older version
Excluding re-highlight and requiring the latest version
Various combinations of the above

Happy to answer any questions I can!

Screencap in case that's helpful:

https://user-images.githubusercontent.com/1233514/182452089-8dd05692-78f2-4147-b9e6-47a6626b5e1d.mov

Thanks to all for your work on 10x <3

10x Version

1.4.1

Reagent Version

1.1.0

React Version

^16.14.0

re-frame Version

1.2.0

What browsers are you seeing the problem on?

Firefox, Chrome

Relevant console output

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at unmountHostComponents (http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:424:401)
    at commitMutationEffects (http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:499:400)
    at HTMLUnknownElement.callCallback (http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:553:362)
    at Object.invokeGuardedCallbackImpl (http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:555:431)
    at invokeGuardedCallback (http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:3:132)
    at commitRootImpl (http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:487:148)
    at exports.unstable_runWithPriority (http://localhost:3000/js/cljs-runtime/module$node_modules$scheduler$cjs$scheduler_development.js:19:363)
    at runWithPriority$1 (http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:130:474)
    at commitRoot (http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:479:104)
    at performSyncWorkOnRoot (http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:456:165)
unmountHostComponents @ react-dom.development.js:7602
commitMutationEffects @ react-dom.development.js:20501
callCallback @ react-dom.development.js:189
invokeGuardedCallbackImpl @ react-dom.development.js:238
invokeGuardedCallback @ react-dom.development.js:293
commitRootImpl @ react-dom.development.js:22510
exports.unstable_runWithPriority @ scheduler.development.js:654
runWithPriority$1 @ react-dom.development.js:11040
commitRoot @ react-dom.development.js:22382
performSyncWorkOnRoot @ react-dom.development.js:21808
eval @ react-dom.development.js:11090
exports.unstable_runWithPriority @ scheduler.development.js:654
runWithPriority$1 @ react-dom.development.js:11040
flushSyncCallbackQueueImpl @ react-dom.development.js:11085
flushSyncCallbackQueue @ react-dom.development.js:11073
scheduleWork @ react-dom.development.js:21200
enqueueForceUpdate @ react-dom.development.js:12679
Component.forceUpdate @ react.development.js:491
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__64039 @ 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:4527
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__64937 @ router.cljc:187
channel.port1.onmessage @ nexttick.js:196

react-dom.development.js:19528 The above error occurred in one of your React components:
    in code (created by re_highlight.core.render)
    in pre (created by re_highlight.core.render)
    in re_highlight.core.render (created by re_highlight.core.highlight)
    in re_highlight.core.highlight (created by day8.re_frame_10x.components.re_com.box)
    in div (created by day8.re_frame_10x.components.re_com.box)
    in day8.re_frame_10x.components.re_com.box (created by code)
    in code (created by day8.re_frame_10x.panels.event.views.code)
    in day8.re_frame_10x.panels.event.views.code (created by day8.re_frame_10x.components.re_com.v_box)
    in div (created by day8.re_frame_10x.components.re_com.v_box)
    in day8.re_frame_10x.components.re_com.v_box (created by day8.re_frame_10x.panels.event.views.panel)
    in day8.re_frame_10x.panels.event.views.panel (created by day8.re_frame_10x.components.re_com.v_box)
    in div (created by day8.re_frame_10x.components.re_com.v_box)
    in day8.re_frame_10x.components.re_com.v_box (created by day8.re_frame_10x.navigation.views.tab_content)
    in day8.re_frame_10x.navigation.views.tab_content (created by day8.re_frame_10x.components.re_com.v_box)
    in div (created by day8.re_frame_10x.components.re_com.v_box)
    in day8.re_frame_10x.components.re_com.v_box (created by day8.re_frame_10x.components.re_com.v_split)
    in div (created by day8.re_frame_10x.components.re_com.v_split)
    in div (created by day8.re_frame_10x.components.re_com.v_split)
    in day8.re_frame_10x.components.re_com.v_split (created by day8.re_frame_10x.navigation.views.devtools_inner)
    in day8.re_frame_10x.navigation.views.devtools_inner (created by day8.re_frame_10x.components.re_com.h_box)
    in div (created by day8.re_frame_10x.components.re_com.h_box)
    in day8.re_frame_10x.components.re_com.h_box (created by day8.re_frame_10x.components.re_com.box)
    in div (created by day8.re_frame_10x.components.re_com.box)
    in day8.re_frame_10x.components.re_com.box (created by devtools outer)
    in devtools outer (created by day8.re_frame_10x.devtools_outer)
    in day8.re_frame_10x.devtools_outer (created by day8.re_frame_10x.inlined_deps.spade.git_sha_93ef290.react.with_style_container)
    in day8.re_frame_10x.inlined_deps.spade.git_sha_93ef290.react.with_style_container

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:19528
logError @ react-dom.development.js:19565
expirationTime.callback @ react-dom.development.js:20709
commitUpdateQueue @ react-dom.development.js:12491
commitLifeCycles @ react-dom.development.js:19884
commitLayoutEffects @ react-dom.development.js:22804
callCallback @ react-dom.development.js:189
invokeGuardedCallbackImpl @ react-dom.development.js:238
invokeGuardedCallback @ react-dom.development.js:293
commitRootImpl @ react-dom.development.js:22542
exports.unstable_runWithPriority @ scheduler.development.js:654
runWithPriority$1 @ react-dom.development.js:11040
commitRoot @ react-dom.development.js:22382
performSyncWorkOnRoot @ react-dom.development.js:21808
eval @ react-dom.development.js:11090
exports.unstable_runWithPriority @ scheduler.development.js:654
runWithPriority$1 @ react-dom.development.js:11040
flushSyncCallbackQueueImpl @ react-dom.development.js:11085
flushSyncCallbackQueue @ react-dom.development.js:11073
scheduleWork @ react-dom.development.js:21200
enqueueForceUpdate @ react-dom.development.js:12679
Component.forceUpdate @ react.development.js:491
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__64039 @ 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:4527
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__64937 @ router.cljc:187
channel.port1.onmessage @ nexttick.js:196

react-dom.development.js:19528 The above error occurred in the <span> component:
    in span (created by re_highlight.core.render)
    in code (created by re_highlight.core.render)
    in pre (created by re_highlight.core.render)
    in re_highlight.core.render (created by re_highlight.core.highlight)
    in re_highlight.core.highlight (created by day8.re_frame_10x.components.re_com.box)
    in div (created by day8.re_frame_10x.components.re_com.box)
    in day8.re_frame_10x.components.re_com.box (created by code)
    in code (created by day8.re_frame_10x.panels.event.views.code)
    in day8.re_frame_10x.panels.event.views.code (created by day8.re_frame_10x.components.re_com.v_box)
    in div (created by day8.re_frame_10x.components.re_com.v_box)
    in day8.re_frame_10x.components.re_com.v_box (created by day8.re_frame_10x.panels.event.views.panel)
    in day8.re_frame_10x.panels.event.views.panel (created by day8.re_frame_10x.components.re_com.v_box)
    in div (created by day8.re_frame_10x.components.re_com.v_box)
    in day8.re_frame_10x.components.re_com.v_box (created by day8.re_frame_10x.navigation.views.tab_content)
    in day8.re_frame_10x.navigation.views.tab_content (created by day8.re_frame_10x.components.re_com.v_box)
    in div (created by day8.re_frame_10x.components.re_com.v_box)
    in day8.re_frame_10x.components.re_com.v_box (created by day8.re_frame_10x.components.re_com.v_split)
    in div (created by day8.re_frame_10x.components.re_com.v_split)
    in div (created by day8.re_frame_10x.components.re_com.v_split)
    in day8.re_frame_10x.components.re_com.v_split (created by day8.re_frame_10x.navigation.views.devtools_inner)
    in day8.re_frame_10x.navigation.views.devtools_inner (created by day8.re_frame_10x.components.re_com.h_box)
    in div (created by day8.re_frame_10x.components.re_com.h_box)
    in day8.re_frame_10x.components.re_com.h_box (created by day8.re_frame_10x.components.re_com.box)
    in div (created by day8.re_frame_10x.components.re_com.box)
    in day8.re_frame_10x.components.re_com.box (created by devtools outer)
    in devtools outer (created by day8.re_frame_10x.devtools_outer)
    in day8.re_frame_10x.devtools_outer (created by day8.re_frame_10x.inlined_deps.spade.git_sha_93ef290.react.with_style_container)
    in day8.re_frame_10x.inlined_deps.spade.git_sha_93ef290.react.with_style_container

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:19528
logError @ react-dom.development.js:19565
expirationTime.callback @ react-dom.development.js:20709
commitUpdateQueue @ react-dom.development.js:12491
commitLifeCycles @ react-dom.development.js:19884
commitLayoutEffects @ react-dom.development.js:22804
callCallback @ react-dom.development.js:189
invokeGuardedCallbackImpl @ react-dom.development.js:238
invokeGuardedCallback @ react-dom.development.js:293
commitRootImpl @ react-dom.development.js:22542
exports.unstable_runWithPriority @ scheduler.development.js:654
runWithPriority$1 @ react-dom.development.js:11040
commitRoot @ react-dom.development.js:22382
performSyncWorkOnRoot @ react-dom.development.js:21808
eval @ react-dom.development.js:11090
exports.unstable_runWithPriority @ scheduler.development.js:654
runWithPriority$1 @ react-dom.development.js:11040
flushSyncCallbackQueueImpl @ react-dom.development.js:11085
flushSyncCallbackQueue @ react-dom.development.js:11073
scheduleWork @ react-dom.development.js:21200
enqueueForceUpdate @ react-dom.development.js:12679
Component.forceUpdate @ react.development.js:491
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__64039 @ 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:4527
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__64937 @ router.cljc:187
channel.port1.onmessage @ nexttick.js:196

react-dom.development.js:19528 The above error occurred in one of your React components:
    in code (created by re_highlight.core.render)
    in pre (created by re_highlight.core.render)
    in re_highlight.core.render (created by re_highlight.core.highlight)
    in re_highlight.core.highlight (created by day8.re_frame_10x.components.re_com.box)
    in div (created by day8.re_frame_10x.components.re_com.box)
    in day8.re_frame_10x.components.re_com.box (created by code)
    in code (created by day8.re_frame_10x.panels.event.views.code)
    in day8.re_frame_10x.panels.event.views.code (created by day8.re_frame_10x.components.re_com.v_box)
    in div (created by day8.re_frame_10x.components.re_com.v_box)
    in day8.re_frame_10x.components.re_com.v_box (created by day8.re_frame_10x.panels.event.views.panel)
    in day8.re_frame_10x.panels.event.views.panel (created by day8.re_frame_10x.components.re_com.v_box)
    in div (created by day8.re_frame_10x.components.re_com.v_box)
    in day8.re_frame_10x.components.re_com.v_box (created by day8.re_frame_10x.navigation.views.tab_content)
    in day8.re_frame_10x.navigation.views.tab_content (created by day8.re_frame_10x.components.re_com.v_box)
    in div (created by day8.re_frame_10x.components.re_com.v_box)
    in day8.re_frame_10x.components.re_com.v_box (created by day8.re_frame_10x.components.re_com.v_split)
    in div (created by day8.re_frame_10x.components.re_com.v_split)
    in div (created by day8.re_frame_10x.components.re_com.v_split)
    in day8.re_frame_10x.components.re_com.v_split (created by day8.re_frame_10x.navigation.views.devtools_inner)
    in day8.re_frame_10x.navigation.views.devtools_inner (created by day8.re_frame_10x.components.re_com.h_box)
    in div (created by day8.re_frame_10x.components.re_com.h_box)
    in day8.re_frame_10x.components.re_com.h_box (created by day8.re_frame_10x.components.re_com.box)
    in div (created by day8.re_frame_10x.components.re_com.box)
    in day8.re_frame_10x.components.re_com.box (created by devtools outer)
    in devtools outer (created by day8.re_frame_10x.devtools_outer)
    in day8.re_frame_10x.devtools_outer (created by day8.re_frame_10x.inlined_deps.spade.git_sha_93ef290.react.with_style_container)
    in day8.re_frame_10x.inlined_deps.spade.git_sha_93ef290.react.with_style_container

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:19528
logError @ react-dom.development.js:19565
expirationTime.callback @ react-dom.development.js:20709
commitUpdateQueue @ react-dom.development.js:12491
commitLifeCycles @ react-dom.development.js:19884
commitLayoutEffects @ react-dom.development.js:22804
callCallback @ react-dom.development.js:189
invokeGuardedCallbackImpl @ react-dom.development.js:238
invokeGuardedCallback @ react-dom.development.js:293
commitRootImpl @ react-dom.development.js:22542
exports.unstable_runWithPriority @ scheduler.development.js:654
runWithPriority$1 @ react-dom.development.js:11040
commitRoot @ react-dom.development.js:22382
performSyncWorkOnRoot @ react-dom.development.js:21808
eval @ react-dom.development.js:11090
exports.unstable_runWithPriority @ scheduler.development.js:654
runWithPriority$1 @ react-dom.development.js:11040
flushSyncCallbackQueueImpl @ react-dom.development.js:11085
flushSyncCallbackQueue @ react-dom.development.js:11073
scheduleWork @ react-dom.development.js:21200
enqueueForceUpdate @ react-dom.development.js:12679
Component.forceUpdate @ react.development.js:491
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__64039 @ 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:4527
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__64937 @ router.cljc:187
channel.port1.onmessage @ nexttick.js:196

react-dom.development.js:11103 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
    at unmountHostComponents (http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:424:401)
    at commitMutationEffects (http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:499:400)
    at HTMLUnknownElement.callCallback (http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:553:362)
    at Object.invokeGuardedCallbackImpl (http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:555:431)
    at invokeGuardedCallback (http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:3:132)
    at commitRootImpl (http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:487:148)
    at exports.unstable_runWithPriority (http://localhost:3000/js/cljs-runtime/module$node_modules$scheduler$cjs$scheduler_development.js:19:363)
    at runWithPriority$1 (http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:130:474)
    at commitRoot (http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:479:104)
    at performSyncWorkOnRoot (http://localhost:3000/js/cljs-runtime/module$node_modules$react_dom$cjs$react_dom_development.js:456:165)

eggsyntax commented 1 year ago

Update: confirmed that downgrading 10x to 1.3.0 solves the problem; I'll just go with that for now on our project (but happy to test other solutions if/when that would be helpful).

eggsyntax commented 1 year ago

Update 2: created a minimal-ish repro by creating a project with

lein new luminus crash10x +shadow-cljs +cljs +re-frame

and removing re-frisk from the project, adding preloads etc for 10x, and changing the event fns to fn-traced so there'd be something present in the Events tab. Should have made an initial commit after the creation with luminus but didn't think to at the time, apologies.

That's here: https://github.com/eggsyntax/crash10x

hipitihop commented 1 year ago

I have found the same issue: Environment

re-frame-10x:     1.5.0
Linux Ubuntu:     22.04.x
Chrome:           105.0.5195.125 (Official Build) (64-bit)
re-frame:         1.3.0
devtools:         1.0.6
highlight.js:     11.6.0

p-himik commented 1 year ago

The root cause is incorrect usage of Highlight.js - in https://github.com/highlightjs/highlight.js/pull/3057 they effectively removed undocumented ability to highlight children elements by calling highlightElement in their common parent. And it seems that that ability have never really been there in the first place - I tried rolling back to multiple versions of Highlight.js, all the way to 10.7 (apparently the smallest version where the API required by re-frame-10x is supported), to no avail.

It seems to me that a proper fix would be to:

Incorporate re-highlight into re-frame-10x because IMO changes required for a fix go beyond the scope of re-highlight (and seems that that library was created specifically for re-frame-10x in the first place - not sure why those trivial 15 lines weren't written within re-frame-10x in the first place; I'm also not sure why it sets the non-public called property - it doesn't seem like it should do anything at all in the versions of Highlight.js that have the required API)
Rewrite this block in such a way so that it's still in the same [:pre [:code ...]] but highlightElement is called on each child separately (of course, each child will have to be wrapped in a span)

Alternatively, the scope of re-highlight could be expanded so it supports highlighting within highlighting, and then hljs-compatible? could be removed - it should be completely opaque to re-frame-10x whether the right version is used or not.

kimo-k commented 1 year ago

Disabled syntax highlighting for now, since this crash seems pretty bad.

@p-himik, thanks for the detailed analysis, I'll look into it.

It may be just because I'm new, but re-highlight seems hard to maintain. I'm considering whether to fix re-highlight or replace it with something simpler.

kimo-k commented 1 year ago

Both highlighting & crash removed in 1.7.0

kimo-k commented 11 months ago

Added new highlighting that doesn't depend on highlight.js. No more react bugs.

eggsyntax commented 11 months ago

Thanks, it's appreciated!

day8 / re-frame-10x