找不到模块：无法解析"@react-3/大炮"

Question

我不能为我的生活弄清楚为什么我一直得到这个错误。这很可能是一个简单的疏忽，使情况变得更糟。

我使用CRA创建了一个新的React应用程序，安装了@react-three/fiber, @react-three/cannon和3，并将use-cannon文档中的代码示例复制到我的应用程序组件中。但是，我总是得到这个错误。我试过重新安装软件包，但没有任何效果。我试着放弃这个应用程序，开始一个新的。什么都没有。我使用代码沙箱也得到同样的错误。

我的<<p> strong> 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"
}

And myApp.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大炮2.5.0的演示)

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