Grafana not supports react-three/fiber?

[morpinma]

Hi, I am trying to make a plugin panel with react-three/fiber. I found this example and tried to replicate it in my code. https://codesandbox.io/p/sandbox/gifted-varahamihira-rrppl0y8l4?file=%2Fpackage.json%3A14%2C23.
This is my code:
import React, { useRef, useState } from ‘react’
import { PanelProps } from ‘@grafana/data’;
import {SimpleOptions } from ‘types’;
import { css, cx } from ‘@emotion/css’;
import { useStyles2 } from ‘@grafana/ui’;
import { PanelDataErrorView } from ‘@grafana/runtime’;
import * as THREE from ‘three’;
import { Canvas, useFrame } from ‘@react-three/fiber’
import { Sphere, Text, OrbitControls } from ‘@react-three/drei’

interface Props extends PanelProps {}

function Box(props) {
// This reference gives us direct access to the THREE.Mesh object
const ref = useRef()
// Hold state for hovered and clicked events
const [hovered, hover] = useState(false)
const [clicked, click] = useState(false)
// Subscribe this component to the render-loop, rotate the mesh every frame
useFrame((state, delta) => (ref.current.rotation.x += delta))
// Return the view, these are regular Threejs elements expressed in JSX
return (
<mesh
{…props}
ref={ref}
scale={clicked ? 1.5 : 1}
onClick={(event) => click(!clicked)}
onPointerOver={(event) => (event.stopPropagation(), hover(true))}
onPointerOut={(event) => hover(false)}>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color={hovered ? ‘hotpink’ : ‘orange’} />

)
}

export const SimplePanel: React.FC = ({options, data, width, height, fieldConfig, id }) => {

if (data.series.length === 0) {
return ;
}

return (

This is a example

  <Canvas>
    <ambientLight intensity={Math.PI / 2} />
    <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
    <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
    <Box position={[-1.2, 0, 0]} />
    <Box position={[1.2, 0, 0]} />
    <OrbitControls />
  </Canvas>

</div>

);
};
This is I see after the code rendered. The output is not what I expected.

An unexpected error happened
TypeError: undefined is not an object (evaluating 'ReactCurrentActQueue.current')

Canvas@
FiberProvider@
CanvasWrapper
div
SimplePanel@

Thank you for your help!!!

[tomglenn]

Hi @morpinma,

I was able to replicate the issue you encountered but was unfortunately unable to come to a solution using React Three Fiber, even after stripping back the example to a minimal reproduction and tweaking package dependency versions.

I did however stumble upon an old issue on the React Three Fiber Github which was discussing the same error. This issue didn’t seem to get resolved.

It’s hard to say where the issue lies, so for now I think it’s probably safe to assume React Three Fiber is not compatible with the Grafana plugin pipeline.

However, I was able to create a small demo that uses native Three.js instead if this helps.

import React, { useEffect, useRef } from 'react';
import { PanelProps } from '@grafana/data';
import { SimpleOptions } from 'types';
import * as THREE from 'three';

interface Props extends PanelProps<SimpleOptions> { }
interface BoxProps {
  width: number;
  height: number;
}

const Box: React.FC<BoxProps> = ({ width, height }) => {
  const mountRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (mountRef.current === null) {
      return;
    }

    // Scene
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xeeeeee);

    // Camera
    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    camera.position.z = 5;

    // Renderer
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    mountRef.current.appendChild(renderer.domElement);

    // Box
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x0000ff });
    const box = new THREE.Mesh(geometry, material);
    scene.add(box);

    // Animation function
    const animate = () => {
      requestAnimationFrame(animate);
      box.rotation.x += 0.01;
      box.rotation.y += 0.01;
      renderer.render(scene, camera);
    };
    animate();

    // Cleanup on component unmount
    return () => {
      if (mountRef.current) {
        // eslint-disable-next-line react-hooks/exhaustive-deps
        mountRef.current.removeChild(renderer.domElement);
      }
    };
  }, [width, height]);

  return <div ref={mountRef}></div>;
};


export const SimplePanel: React.FC<Props> = ({ options, data, width, height, fieldConfig, id }) => {

  return (
    <div>
      <Box width={width} height={height} />
    </div>
  );
};

[josephcarls72727]

It seems like React Three Fiber might not be fully compatible with the Grafana plugin pipeline, based on your findings. Since you couldn’t resolve the issue after tweaking dependencies, using native Three.js is a good workaround. The Geometry Dash download demo you created using Three.js should help keep things moving forward. Hopefully, further updates or community solutions will address the React Three Fiber compatibility in the future.