useMemo Issue with React Three-fiber when adding the Canvas

Question

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), []);

Alexey Bykovskii · Accepted Answer · 2023-01-08 11:10:40Z

1

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>
  );
};

answered Jan 8, 2023 at 11:10

Alexey Bykovskii

1955 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

code effect Over a year ago

i tried adding this adjustment, the issue remained the same, as if its something related to their library, because the issue is originated from the file :(react-three-fiber.esm.js:119:1) at the code : React.useMemo(() => extend(THREE), []);

code effect · Accepted Answer · 2023-01-08 13:36:45Z

0

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

edited Jan 8, 2023 at 13:36

answered Jan 8, 2023 at 13:36

code effect

12 bronze badges

Collectives™ on Stack Overflow

useMemo Issue with React Three-fiber when adding the Canvas

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related