re-frame-10x icon indicating copy to clipboard operation
re-frame-10x copied to clipboard
verified publisher icon day8

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

Open eggsyntax opened this issue 3 years ago • 2 comments

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 avatar Aug 02 '22 18:08 eggsyntax

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 avatar Aug 03 '22 15:08 eggsyntax

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

eggsyntax avatar Aug 03 '22 18:08 eggsyntax

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

hipitihop avatar Sep 28 '22 01:09 hipitihop

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:

  1. 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)
  2. 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.

p-himik avatar Feb 19 '23 16:02 p-himik

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 avatar Jul 03 '23 03:07 kimo-k

Both highlighting & crash removed in 1.7.0

kimo-k avatar Jul 03 '23 06:07 kimo-k

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

kimo-k avatar Jul 26 '23 01:07 kimo-k

Thanks, it's appreciated!

eggsyntax avatar Jul 27 '23 17:07 eggsyntax