Hi, I'm using grafana. And I'm trying to create grafana plugin, witch is basically

That worked. updated package.json pasted below <div class="highlight highlight-sou

Problem with using react three fiber in grafana about its-fine HOT 4 CLOSED

pmndrs commented on May 10, 2024 1

Problem with using react three fiber in grafana

from its-fine.

Comments (4)

CodyJasonBennett commented on May 10, 2024 1

This would likely come from mismatched versions of react which can break context and create false positives like this. @react-three/fiber requires react and react-dom 18+, so try upgrading those with a clean install.

from its-fine.

LouisMarzorati commented on May 10, 2024 1

That worked. updated package.json pasted below

  "dependencies": {
    "@react-three/drei": "^8.10.6",
    "@react-three/fiber": "^8.9.1",
    "@types/three": "^0.146.0",
    "autoprefixer": "^10.4.13",
    "next": "^13.0.7",
    "postcss": "^8.4.20",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sass": "^1.49.8",
    "tailwindcss": "^3.2.4",
    "three": "^0.147.0"
  },

from its-fine.

kevinwgutierrez commented on May 10, 2024

2nd this

having same problem but in a Next.js app, just installed all necessary deps and libs

from its-fine.

LouisMarzorati commented on May 10, 2024

3rd this

Just have a <Canvas> element rendering on a new nextjs app.

  "dependencies": {
    "@react-three/drei": "^8.10.6",
    "@react-three/fiber": "^8.9.1",
    "@types/three": "^0.146.0",
    "autoprefixer": "^10.4.13",
    "next": "12.1.0",
    "postcss": "^8.4.20",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "tailwindcss": "^3.2.4",
    "three": "^0.147.0"
  },

import { Canvas } from "@react-three/fiber";

export default function Home() {
  return (
    <div className="flex flex-colitems-center justify-center">
      <Canvas camera={{ position: [0, 0, 5] }}>
        <ambientLight />
        <pointLight position={[10, 10, 10]} />
        <mesh>
          <boxBufferGeometry args={[2, 2, 2]} />
          <meshStandardMaterial color="hotpink" />
        </mesh>
      </Canvas>
    </div>
  );
}