React fiber three not supporting in grafana app plugin and panel plugin

import React, { useRef, useState } from “react”

import { Canvas, useFrame } from ‘@react-three/fiber’

function Box(props: any) {
// This reference will give us direct access to the mesh
const meshRef = useRef()
// Set up state for the hovered and active state
const [hovered, setHover] = useState(false)
const [active, setActive] = useState(false)
// Subscribe this component to the render-loop, rotate the mesh every frame
useFrame((state, delta) => (meshRef.current.rotation.x += delta))
// Return view, these are regular three.js elements expressed in JSX
return (
scale={active ? 1.5 : 1}
onClick={(event) => setActive(!active)}
onPointerOver={(event) => setHover(true)}
onPointerOut={(event) => setHover(false)}>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color={hovered ? ‘hotpink’ : ‘orange’} />

interface Props{


export const BuildingViewer: React.FC = (props) => {



React fiber three not working in App plugin and Panel plugin its throwing below error

Hi @jcsnaren :wave:

Which version of @react-three/fiber are you using, and also which Grafana are you trying to run it in? Can it be that this is connected to the warning “Multiple instances of Three.js being imported”?

Hi @leventebalogh Grafana latest version Release 10.4.1 (2024-03-20) · grafana/grafana · GitHub,
Rect-fiber-three Version is 8.16.0,
Please ignore "Multiple instances of Three.js being imported”? Warning

Hi @leventebalogh :wave: Any update in this issue?

Hi @leventebalogh