How to use r3f-perf (react-three-next)?

[eriksachse]

Adding r3f-perf to react-three-next and using the component inside layout/canvas gives me following error: Uncaught R3F hooks can only be used within the Canvas component! I use the component inside Canvas. In any other app it works. Here is my package.json:

  "dependencies": {
    "@babel/plugin-transform-runtime": "^7.17.0",
    "@react-three/drei": "^9.2.0",
    "@react-three/fiber": "^8.0.10",
    "babel-plugin-glsl": "^1.0.0",
    "glsl-random": "^0.0.5",
    "next": "^12.1.4",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "three": "^0.139.2",
    "three-stdlib": "^2.9.1",
    "zustand": "^3.7.2"
  },
  "devDependencies": {
    "@next/bundle-analyzer": "^12.0.10",
    "autoprefixer": "^10.4.2",
    "eslint": "^8.8.0",
    "eslint-config-next": "^12.0.10",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-tailwind": "^0.2.1",
    "file-loader": "^6.2.0",
    "glslify": "^7.1.1",
    "glslify-loader": "^2.0.0",
    "next-compose-plugins": "^2.2.1",
    "next-offline": "^5.0.5",
    "postcss": "^8.4.12",
    "prettier": "^2.6.2",
    "r3f-perf": "^6.0.1",
    "raw-loader": "^4.0.2",
    "tailwindcss": "^3.0.23",
    "url-loader": "^4.1.1"
  }

And here is where I use the component:

    <Canvas
      mode='concurrent'
      style={{
        position: 'absolute',
        top: 0,
      }}
      onCreated={(state) => state.events.connect(dom.current)}
    >
      <Perf />
      <LControl />
      <Preload all />
      {children}
    </Canvas>

[eskimm]

I tried to load in the same way and got this error. Uncaught R3F hooks can only be used within the Canvas component!

[ahuertam]

This happened to me when upgrading to React 18, might be the reason

[eriksachse]

It's working!