useMemo Issue with React Three-fiber when adding the Canvas-CodePudding

I have the below package.json, i installed three, three/drei and three/fiber and three/postprocessing

{
  "dependencies": {
    "@react-three/drei": "9.14.3",
    "@react-three/fiber": "8.0.26",
    "@react-three/postprocessing": "2.4.4",
    "three": "^0.141.0"
  }
}

the current code is adding a canvas object into the react application, Box is just a component returning a mesh element


import React, { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import Box from "./Box";
const ThreeD = () => { 
  return (
    <div>
      <Suspense fallback={null}>
        <Canvas shadows>
          <Box />
        </Canvas>
      </Suspense>
    </div>
  );
};

on the load of the page i got the below issue:

error on load I tried using the useMemo as below, but the same issue remains,

import React, { Suspense, useMemo } from "react";
import { Canvas } from "@react-three/fiber";
import Box from "./Box";
const ThreeD = () => {
  const Canv = useMemo(() => {
    return (
      <Canvas>
        <Suspense fallback={null}>
          <Box />
        </Suspense>
      </Canvas>
    );
  });
  return (
    <div>
      <Canv />
    </div>
  );
};

export default ThreeD;

Node version: 8.19.2

the issue is originated from the file :(react-three-fiber.esm.js:119:1) at the code : React.useMemo(() => extend(THREE), []);

CodePudding user response：

I think it can help you. You should add dependencies array in useMemo and use result of useMemo correct.

import React, { Suspense, useMemo } from "react";
import { Canvas } from "@react-three/fiber";
import Box from "./Box";

const ThreeD = () => {
  const Canv = useMemo(() => (
      <Canvas>
        <Suspense fallback={null}>
          <Box />
        </Suspense>
      </Canvas>
  ), []);
  
  return (
    <div>
      {Canv}
    </div>
  );
};

CodePudding user response：

I found the issue, I was installing the packages outside the main project folder