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

【问题标题】：Module not found: Can't resolve '@react-three/cannon'未找到模块：无法解析“@react-three/cannon”
【发布时间】：2021-08-13 13:25:18
【问题描述】：

我一生都无法弄清楚为什么我不断收到此错误。很可能是一个简单的疏忽使情况变得更糟。

我使用 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;

感谢您的帮助！

【问题讨论】：

标签： reactjs react-three-fiber

【解决方案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

【讨论】：

这修复了它！谢谢！