Inspector Panel Disappears on Clicking Directional Light Node

Bugs
1

I’m experiencing an issue where clicking on the directional light node in the Inspector causes an error and makes the panel disappear. Using Inspector version 6.33.0. The error;

babylon.inspector.bundle.max.js:59576 Uncaught TypeError: Cannot read properties of null (reading 'equals')
    at Vector3LineComponent.shouldComponentUpdate (babylon.inspector.bundle.max.js:59576:29)
    at checkShouldComponentUpdate (babylon.inspector.bundle.max.js:20424:33)
    at updateClassComponent (babylon.inspector.bundle.max.js:20938:62)
    at beginWork (babylon.inspector.bundle.max.js:26972:16)
    at HTMLUnknownElement.callCallback (babylon.inspector.bundle.max.js:11844:14)
    at Object.invokeGuardedCallbackImpl (babylon.inspector.bundle.max.js:11893:16)
    at invokeGuardedCallback (babylon.inspector.bundle.max.js:11955:31)
    at beginWork$1 (babylon.inspector.bundle.max.js:31858:7)
    at performUnitOfWork (babylon.inspector.bundle.max.js:30673:12)
    at workLoopSync (babylon.inspector.bundle.max.js:30601:5)
shouldComponentUpdate @ babylon.inspector.bundle.max.js:59576
checkShouldComponentUpdate @ babylon.inspector.bundle.max.js:20424
updateClassComponent @ babylon.inspector.bundle.max.js:20938
beginWork @ babylon.inspector.bundle.max.js:26972
callCallback @ babylon.inspector.bundle.max.js:11844
invokeGuardedCallbackImpl @ babylon.inspector.bundle.max.js:11893
invokeGuardedCallback @ babylon.inspector.bundle.max.js:11955
beginWork$1 @ babylon.inspector.bundle.max.js:31858
performUnitOfWork @ babylon.inspector.bundle.max.js:30673
workLoopSync @ babylon.inspector.bundle.max.js:30601
renderRootSync @ babylon.inspector.bundle.max.js:30564
performSyncWorkOnRoot @ babylon.inspector.bundle.max.js:30187
eval @ babylon.inspector.bundle.max.js:19226
exports.unstable_runWithPriority @ babylon.inspector.bundle.max.js:38645
runWithPriority$1 @ babylon.inspector.bundle.max.js:19175
flushSyncCallbackQueueImpl @ babylon.inspector.bundle.max.js:19221
flushSyncCallbackQueue @ babylon.inspector.bundle.max.js:19208
scheduleUpdateOnFiber @ babylon.inspector.bundle.max.js:29787
enqueueForceUpdate @ babylon.inspector.bundle.max.js:20403
Component.forceUpdate @ babylon.inspector.bundle.max.js:35827
timerRefresh @ babylon.inspector.bundle.max.js:41206
eval @ babylon.inspector.bundle.max.js:41210
setInterval (async)
componentDidMount @ babylon.inspector.bundle.max.js:41210
commitLifeCycles @ babylon.inspector.bundle.max.js:28557
commitLayoutEffects @ babylon.inspector.bundle.max.js:31320
callCallback @ babylon.inspector.bundle.max.js:11844
invokeGuardedCallbackImpl @ babylon.inspector.bundle.max.js:11893
invokeGuardedCallback @ babylon.inspector.bundle.max.js:11955
commitRootImpl @ babylon.inspector.bundle.max.js:31045
exports.unstable_runWithPriority @ babylon.inspector.bundle.max.js:38645
runWithPriority$1 @ babylon.inspector.bundle.max.js:19175
commitRoot @ babylon.inspector.bundle.max.js:30884
performSyncWorkOnRoot @ babylon.inspector.bundle.max.js:30223
scheduleUpdateOnFiber @ babylon.inspector.bundle.max.js:29775
updateContainer @ babylon.inspector.bundle.max.js:33376
eval @ babylon.inspector.bundle.max.js:33915
unbatchedUpdates @ babylon.inspector.bundle.max.js:30325
legacyRenderSubtreeIntoContainer @ babylon.inspector.bundle.max.js:33914
exports.render @ babylon.inspector.bundle.max.js:33997
_CreateEmbedHost @ babylon.inspector.bundle.max.js:56784
Show @ babylon.inspector.bundle.max.js:56897
_createInspector @ debugLayer.js:77
eval @ debugLayer.js:122
show @ debugLayer.js:114
eval @ VM2193:5
immersa$scene$api$show_debug @ VM2193:6
eval @ VM2209:1
shadow$cljs$devtools$client$browser$global_eval @ browser.cljs:155
eval @ browser.cljs:200
shadow$cljs$devtools$client$shared$do_invoke @ shared.cljs:23
shadow$cljs$devtools$client$shared$handle_repl_invoke @ shared.cljs:118
shadow$cljs$devtools$client$shared$interpret_action @ shared.cljs:173
shadow$cljs$devtools$client$shared$interpret_actions @ shared.cljs:208
eval @ shared.cljs:257
shadow$remote$runtime$shared$process @ shared.cljc:181
eval @ shared.cljs:289
shadow$cljs$devtools$client$shared$remote_msg @ shared.cljs:16
eval @ websocket.cljs:19
Show 55 more frames
Show less
VM2193:5 The above error occurred in the <Vector3LineComponent> component:

    at Vector3LineComponent (http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$babylonjs$inspector$dist$babylon_inspector_bundle_max.js:4541:178)
    at div
    at div
    at div
    at LineContainerComponent (http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$babylonjs$inspector$dist$babylon_inspector_bundle_max.js:4478:219)
    at DirectionalLightPropertyGridComponent (http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$babylonjs$inspector$dist$babylon_inspector_bundle_max.js:3033:410)
    at div
    at PropertyGridTabComponent (http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$babylonjs$inspector$dist$babylon_inspector_bundle_max.js:2499:545)
    at div
    at div
    at TabsComponent (http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$babylonjs$inspector$dist$babylon_inspector_bundle_max.js:4036:393)
    at div
    at ActionTabsComponent (http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$babylonjs$inspector$dist$babylon_inspector_bundle_max.js:2351:336)
    at div
    at div
    at div
    at Resizable (http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$babylonjs$inspector$dist$babylon_inspector_bundle_max.js:1234:116)
    at EmbedHostComponent (http://localhost:8280/js/compiled/cljs-runtime/module$node_modules$$babylonjs$inspector$dist$babylon_inspector_bundle_max.js:4041:98)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ babylon.inspector.bundle.max.js:27984
lane.callback @ babylon.inspector.bundle.max.js:28012
commitUpdateQueue @ babylon.inspector.bundle.max.js:20217
commitLifeCycles @ babylon.inspector.bundle.max.js:28630
commitLayoutEffects @ babylon.inspector.bundle.max.js:31320
callCallback @ babylon.inspector.bundle.max.js:11844
invokeGuardedCallbackImpl @ babylon.inspector.bundle.max.js:11893
invokeGuardedCallback @ babylon.inspector.bundle.max.js:11955
commitRootImpl @ babylon.inspector.bundle.max.js:31045
exports.unstable_runWithPriority @ babylon.inspector.bundle.max.js:38645
runWithPriority$1 @ babylon.inspector.bundle.max.js:19175
commitRoot @ babylon.inspector.bundle.max.js:30884
performSyncWorkOnRoot @ babylon.inspector.bundle.max.js:30223
eval @ babylon.inspector.bundle.max.js:19226
exports.unstable_runWithPriority @ babylon.inspector.bundle.max.js:38645
runWithPriority$1 @ babylon.inspector.bundle.max.js:19175
flushSyncCallbackQueueImpl @ babylon.inspector.bundle.max.js:19221
flushSyncCallbackQueue @ babylon.inspector.bundle.max.js:19208
scheduleUpdateOnFiber @ babylon.inspector.bundle.max.js:29787
enqueueForceUpdate @ babylon.inspector.bundle.max.js:20403
Component.forceUpdate @ babylon.inspector.bundle.max.js:35827
timerRefresh @ babylon.inspector.bundle.max.js:41206
eval @ babylon.inspector.bundle.max.js:41210
setInterval (async)
componentDidMount @ babylon.inspector.bundle.max.js:41210
commitLifeCycles @ babylon.inspector.bundle.max.js:28557
commitLayoutEffects @ babylon.inspector.bundle.max.js:31320
callCallback @ babylon.inspector.bundle.max.js:11844
invokeGuardedCallbackImpl @ babylon.inspector.bundle.max.js:11893
invokeGuardedCallback @ babylon.inspector.bundle.max.js:11955
commitRootImpl @ babylon.inspector.bundle.max.js:31045
exports.unstable_runWithPriority @ babylon.inspector.bundle.max.js:38645
runWithPriority$1 @ babylon.inspector.bundle.max.js:19175
commitRoot @ babylon.inspector.bundle.max.js:30884
performSyncWorkOnRoot @ babylon.inspector.bundle.max.js:30223
scheduleUpdateOnFiber @ babylon.inspector.bundle.max.js:29775
updateContainer @ babylon.inspector.bundle.max.js:33376
eval @ babylon.inspector.bundle.max.js:33915
unbatchedUpdates @ babylon.inspector.bundle.max.js:30325
legacyRenderSubtreeIntoContainer @ babylon.inspector.bundle.max.js:33914
exports.render @ babylon.inspector.bundle.max.js:33997
_CreateEmbedHost @ babylon.inspector.bundle.max.js:56784
Show @ babylon.inspector.bundle.max.js:56897
_createInspector @ debugLayer.js:77
eval @ debugLayer.js:122
show @ debugLayer.js:114
eval @ VM2193:5
immersa$scene$api$show_debug @ VM2193:6
eval @ VM2209:1
shadow$cljs$devtools$client$browser$global_eval @ browser.cljs:155
eval @ browser.cljs:200
shadow$cljs$devtools$client$shared$do_invoke @ shared.cljs:23
shadow$cljs$devtools$client$shared$handle_repl_invoke @ shared.cljs:118
shadow$cljs$devtools$client$shared$interpret_action @ shared.cljs:173
shadow$cljs$devtools$client$shared$interpret_actions @ shared.cljs:208
eval @ shared.cljs:257
shadow$remote$runtime$shared$process @ shared.cljc:181
eval @ shared.cljs:289
shadow$cljs$devtools$client$shared$remote_msg @ shared.cljs:16
eval @ websocket.cljs:19
Show 56 more frames
Show less
babylon.inspector.bundle.max.js:59576 Uncaught TypeError: Cannot read properties of null (reading 'equals')
    at Vector3LineComponent.shouldComponentUpdate (babylon.inspector.bundle.max.js:59576:29)
    at checkShouldComponentUpdate (babylon.inspector.bundle.max.js:20424:33)
    at updateClassComponent (babylon.inspector.bundle.max.js:20938:62)
    at beginWork (babylon.inspector.bundle.max.js:26972:16)
    at HTMLUnknownElement.callCallback (babylon.inspector.bundle.max.js:11844:14)
    at Object.invokeGuardedCallbackImpl (babylon.inspector.bundle.max.js:11893:16)
    at invokeGuardedCallback (babylon.inspector.bundle.max.js:11955:31)
    at beginWork$1 (babylon.inspector.bundle.max.js:31858:7)
    at performUnitOfWork (babylon.inspector.bundle.max.js:30673:12)
    at workLoopSync (babylon.inspector.bundle.max.js:30601:5)
2

We would need a repro as it works in the playground:

image
image1659×1376 105 KB

3

I can’t create a PG, because I’m consuming the library using ClojureScript language. But I’ll try to find a way to express my issue in a more clear way.