typescript - När react-bootstrap och react-three/drei kombineras uppstår felet unionstyp som är för komplex i <Button>

Fenomen

När react-bootstrap och react-three/drei kombineras uppstår följande fel i react-bootstrap

Uttrycket producerar en unionstyp som är för komplex för att kunna representeras.ts(2590)

Koden finns i kodsandboxen nedan.

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

Filnamn: App.tsx Rad: 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>
  );
}

försökte

Efter att ha tagit bort OrbitControls-funktionen och importen av "@react-three/drei" i TestScreen.tsx från den ursprungliga koden försvann felet.

Nedan är koden https://codesandbox.io/s/react-r3f-bootstrap-67e01z?file=/src/App.tsx

Möjlig orsak

Utifrån det ovan, antar jag att "@react-three/drei" och "react-bootstrap" är i konflikt.

Men jag kunde inte hitta hur man åtgärdar felet. Båda paketen krävs för mitt projekt.

Jag läste också problemet nedan, men kunde inte lösa mitt problem. https://github.com/react-bootstrap/react-bootstrap/issues/6283

Det skulle vara hjälpsamt om du kunde berätta för mig hur jag rättar felet, eller om det inte finns något sätt att rätta felet.

tack för att du läst så här långt

Relaterade artiklar