5

Phenomenon

When react-bootstrap and react-three/drei are combined, the following error occurs in of react-bootstrap

Expression produces a union type that is too complex to represent.ts(2590)

The code is in the code sandbox below.

https://codesandbox.io/s/react-r3f-r3d-bootstrap-t7111f?file=/src/App.tsx

File Name:App.tsx Line : 40

import "./styles.css";
import { useRef } from "react";
import { Button } from "react-bootstrap";
import { Canvas, useFrame } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";

const Box = (props: JSX.IntrinsicElements["mesh"]) => {
  const ref = useRef<THREE.Mesh>(null!);

  useFrame((state) => {
    ref.current.rotation.x += 0.01;
    ref.current.rotation.y += 0.01;
    ref.current.rotation.z += 0.01;
  });
  return (
    <mesh ref={ref} {...props}>
      <boxBufferGeometry />
      <meshPhysicalMaterial color="blue" />
    </mesh>
  );
};
export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <div style={{ height: "50vh", width: "50vw" }}>
        <Canvas
          style={{ background: "black" }}
          camera={{ position: [3, 3, 3] }}
        >
          <ambientLight intensity={0.5} />
          <Box position={[1, 1, 0]} />
          <OrbitControls enableDamping={false} attach="orbitControls" />
          <axesHelper args={[2]} />
        </Canvas>
      </div>

      <Button type="submit">Action</Button>
    </div>
  );
}

tried

After removing the OrbitControls function and the import of "@react-three/drei" in TestScreen.tsx from the original code, the error disappeared.

Below is the code https://codesandbox.io/s/react-r3f-bootstrap-67e01z?file=/src/App.tsx

Possible cause

From the above, I guess that "@react-three/drei" and "react-bootstrap" conflict.

But I couldn't find how to correct the error. Both packages are required for my project.

I also read the Issue below, but was unable to resolve my problem. https://github.com/react-bootstrap/react-bootstrap/issues/6283

It would be helpful if you could tell me how I correct the error, or there is no way to correct the error.

thanks for reading this far

MOSUMA
  • 51
  • 1

0 Answers0