When I unmount a Component that uses I get an error from Outlines.js. Everything is working fine as it should until the component unmounts. The error…
react-three-fiber.esm.js:145
Uncaught TypeError: Cannot read properties of null (reading 'children')
at Outlines.js:136:24
at safelyCallDestroy (react-reconciler.development.js:14468:5)
at commitHookEffectListUnmount (react-reconciler.development.js:14632:11)
at commitPassiveUnmountInsideDeletedTreeOnFiber (react-reconciler.development.js:16703:11)
at commitPassiveUnmountEffectsInsideOfDeletedTree_begin (react-reconciler.development.js:16653:5)
at commitPassiveUnmountEffects_begin (react-reconciler.development.js:16561:11)
at commitPassiveUnmountEffects (react-reconciler.development.js:16546:3)
at flushPassiveEffectsImpl (react-reconciler.development.js:19141:3)
at flushPassiveEffects (react-reconciler.development.js:19095:14)
at commitRootImpl (react-reconciler.development.js:19046:5)
How I am using …
<mesh
geometry={nodes.Chair_A.geometry}
onPointerOver={() => setHovered(true)}
onPointerOut={() => setHovered(false)}
>
<Outlines
angle={0}
thickness={hovered ? 1.1 : 0}
color={hovered ? "yellow" : "white"}
/>
</mesh>
Now this is the actual place where the error occurs from Drei’s Outlines.js file…
React.useEffect(() => {
return () => {
// Dispose everything on unmount
const group = ref.current;
let mesh = group.children[0]; <-- ERROR HAPPENS HERE
if (mesh) {
if (angle) mesh.geometry.dispose();
group.remove(mesh);
}
};
}, []);
When I add a breakpoint to Drei’s Outline.js, it shows that ref.current is null, Therefore group.children[0] gives the Cannot read properties of null (reading ‘children’) error. I have seen quite a few Examples of how to use , I’m not doing anything much different from the examples from what I can see.