找不到模块：无法解析“@react-three/cannon”

Question

我一辈子都弄不明白为什么我总是收到这个错误。很可能是一个简单的疏忽使情况变得更糟。

我使用 CRA 创建了一个新的 React 应用程序，安装了 @react-three/fiber, @react-three/cannon 和三个，并将 use-cannon 文档中的代码示例复制到我的应用程序组件中以供使用。但是，我不断收到此错误。我试过重新安装软件包，但没有任何作用。我尝试废弃该应用程序并开始一个新应用程序。没有什么。我在使用代码沙箱时也遇到了同样的错误。

我的 package.json 依赖项如下所示：

"dependencies": {
    "@react-three/cannon": "^2.6.0",
    "@react-three/drei": "^7.3.1",
    "@react-three/fiber": "^7.0.6",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "three": "^0.131.3",
    "web-vitals": "^1.1.2"
  }

我的App.js看起来像这样：

import React from "react";
import { Canvas } from "@react-three/fiber";
import { Physics, usePlane, useBox } from "@react-three/cannon";

function Plane(props) {
  const [ref] = usePlane(() => ({ rotation: [-Math.PI / 2, 0, 0], ...props }));
  return (
    <mesh ref={ref}>
      <planeBufferGeometry args={[100, 100]} />
    </mesh>
  );
}

function Cube(props) {
  const [ref] = useBox(() => ({ mass: 1, position: [0, 5, 0], ...props }));
  return (
    <mesh ref={ref}>
      <boxBufferGeometry />
    </mesh>
  );
}

const App = () => {
  return (
    <Canvas>
      <Physics>
        <Plane />
        <Cube />
      </Physics>
    </Canvas>
  );
};

export default App;

感谢您的帮助！

Answer 1

我刚刚注意到 @react-three/cannon 2.6.0 的新版本有问题。尝试将 @react-three/cannon 的版本降级到 2.5.0，错误就会消失。我看到了同样的错误并通过更改版本修复了它。我们可能需要在 r3f github 存储库中提出问题。

运行演示：

(r3f cannon 2.5.0的demo)

https://codesandbox.io/s/elegant-sinoussi-zjzhj?file=/src/Cube.tsx

找不到模块：无法解析“@react-three/cannon”

Module not found: Can't resolve '@react-three/cannon'

reactjs

react-three-fiber