Mesh on click navigation error #1609

LilitBadikyan · 2021-08-27T07:27:38Z

LilitBadikyan
Aug 27, 2021

Hi all, I have a canvas with some meshes on it, when the user hovers over meshes I show a tooltip and use tag from '@react-three/drei' to show the tooltip, also when the user clicks on a mesh I navigate to another page, so the issue is after navigation I get this error,

react-three-fiber.esm.js:385 Uncaught TypeError: Cannot read property 'handlers' of undefined
    at react-three-fiber.esm.js:385
    at Array.forEach (<anonymous>)
    at pointerMissed (react-three-fiber.esm.js:382)
    at react-three-fiber.esm.js:360
    at handleIntersects (react-three-fiber.esm.js:259)
    at HTMLCanvasElement.<anonymous> (react-three-fiber.esm.js:325)

here is my mesh

 <mesh
                    onClick={(e) => {
                        setHover(null);
                        if (e.delta === 0) {
                            // setTimeout(() => {
                                props.history.push(`/app/${i.id}`);
                            // }, 0);
                        }
                    }}

                    onPointerOver={(e) => {
                        if (!dragItemId) {
                            setHover({
                                ...i,
                            })
                        }
                    }}
                    onPointerOut={(e) => setHover(null)}
                    scale={scale}
                    position={[i.x * scale, i.y * scale, 0.5]}
                    ref={planes}
                    key={k}
                >
                 {hovered && hovered.id === i.id &&
                        <Html
                            zIndexRange={[10, 100]}
                            style={{ display: "block", top: -92, left: -20 }}
                        >
                            <div
                                onMouseOver={() => {
                                    if (!dragItemId) {
                                        setHover(i)
                                    }
                                }}
                                onMouseOut={() => setHover(null)}
                                className="content" >
                                <div>
                                    <p>{i.name}</p>
                                </div>

                            </div>
                        </Html>
                    }

                    <circleBufferGeometry args={[10, 100]} />
                    <meshStandardMaterial color={i.color} />
                </mesh>

once I comment the tag OR I call my onClick function with setTimeout 0 it doesnt show the error.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Mesh on click navigation error #1609

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Mesh on click navigation error #1609

Uh oh!

Uh oh!

LilitBadikyan Aug 27, 2021

Replies: 0 comments

LilitBadikyan
Aug 27, 2021