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

**URL:** <https://community.grafana.com/t/react-fiber-three-not-supporting-in-grafana-app-plugin-and-panel-plugin/117935>\
**Category:** Grafana\
**Tags:** plugins\
**Created:** [March 26, 2024, 1:07pm UTC](https://community.grafana.com/t/react-fiber-three-not-supporting-in-grafana-app-plugin-and-panel-plugin/117935 "2024-03-26T13:07:34Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jcsnaren](https://avatars.discourse-cdn.com/v4/letter/j/7993a0/32.png) [@jcsnaren](https://community.grafana.com/u/jcsnaren)\
**Post date:** [March 26, 2024, 1:07pm UTC](https://community.grafana.com/t/react-fiber-three-not-supporting-in-grafana-app-plugin-and-panel-plugin/117935/1 "2024-03-26T13:07:35Z")

</div>

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  
//@ts-ignore  
useFrame((state, delta) =\> (meshRef.current.rotation.x += delta))  
// Return view, these are regular three.js elements expressed in JSX  
return (  
\<mesh  
{…props}  
ref={meshRef}  
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) =\> {

```
return(<>

```

```
</>)

```

}

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

 ![image](https://us1.discourse-cdn.com/grafana/original/3X/5/7/5790fd9cdcd1bd2f500cefccf351b82617d787e4.png)

---

<div class="post-metadata">

**Author:** ![leventebalogh](https://sea2.discourse-cdn.com/grafana/user_avatar/community.grafana.com/leventebalogh/32/23539_2.png) [@leventebalogh](https://community.grafana.com/u/leventebalogh)\
**Post date:** [March 27, 2024, 2:20pm UTC](https://community.grafana.com/t/react-fiber-three-not-supporting-in-grafana-app-plugin-and-panel-plugin/117935/2 "2024-03-27T14:20:57Z")

</div>

Hi @jcsnaren 👋

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”?

---

<div class="post-metadata">

**Author:** ![jcsnaren](https://avatars.discourse-cdn.com/v4/letter/j/7993a0/32.png) [@jcsnaren](https://community.grafana.com/u/jcsnaren)\
**Post date:** [March 27, 2024, 2:45pm UTC](https://community.grafana.com/t/react-fiber-three-not-supporting-in-grafana-app-plugin-and-panel-plugin/117935/3 "2024-03-27T14:45:32Z")

</div>

Hi @leventebalogh Grafana latest version [Release 10.4.1 (2024-03-20) · grafana/grafana · GitHub](https://github.com/grafana/grafana/releases/tag/v10.4.1),  
Rect-fiber-three Version is 8.16.0,  
Please ignore "Multiple instances of Three.js being imported”? Warning

---

<div class="post-metadata">

**Author:** ![jcsnaren](https://avatars.discourse-cdn.com/v4/letter/j/7993a0/32.png) [@jcsnaren](https://community.grafana.com/u/jcsnaren)\
**Post date:** [April 2, 2024, 7:15am UTC](https://community.grafana.com/t/react-fiber-three-not-supporting-in-grafana-app-plugin-and-panel-plugin/117935/4 "2024-04-02T07:15:07Z")

</div>

Hi @leventebalogh 👋 Any update in this issue?

---

<div class="post-metadata">

**Author:** ![jcsnaren](https://avatars.discourse-cdn.com/v4/letter/j/7993a0/32.png) [@jcsnaren](https://community.grafana.com/u/jcsnaren)\
**Post date:** [April 15, 2024, 6:55am UTC](https://community.grafana.com/t/react-fiber-three-not-supporting-in-grafana-app-plugin-and-panel-plugin/117935/5 "2024-04-15T06:55:12Z")

</div>

Hi @leventebalogh

---

<div class="post-metadata">

**Author:** ![ouhamouy10](https://avatars.discourse-cdn.com/v4/letter/o/c6cbf5/32.png) [@ouhamouy10](https://community.grafana.com/u/ouhamouy10)\
**Post date:** [June 24, 2026, 8:38am UTC](https://community.grafana.com/t/react-fiber-three-not-supporting-in-grafana-app-plugin-and-panel-plugin/117935/6 "2026-06-24T08:38:11Z")

</div>

I posted a solution in another [here](https://community.grafana.com/t/solved-how-to-use-react-three-fiber-r3f-in-a-grafana-panel-plugin/163393)  
I forgot this topic was open so I made a new one, since 1y has passed I assumed it was closed too