React crashes when @react-three/cannon is imported.

[alileonainagas]

Hey there everyone! First of all I would to thank Poimandres Team for all the smooth stuff they're working at. I'm amazed I found this tools.

My react app is going on an infinite loop (I guess) when I first import the use-cannon library into my project. So, I'm unable to import physics, I don't really know what's going on here.

I'm not a really big fan of CRA, so I always build up my workspace from scratch with Parcel since it allows no configuration and a minimalistic perspective of React.

Here's my package.json

  "name": "my-3d-workspace",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "parcel build ./src/index.html",
    "start": "parcel ./src/index.html --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@react-three/cannon": "^0.5.3",
    "@react-three/drei": "^2.2.12",
    "babel-eslint": "^10.1.0",
    "core-js": "^3.8.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-three-fiber": "^5.3.10",
    "regenerator-runtime": "^0.13.7",
    "styled-components": "^5.2.1",
    "three": "^0.123.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "eslint": "^7.15.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "parcel-bundler": "^1.12.4"
  }
}

---

Then I created a new .js file called Display to render everything relate to my 3D workspace:

import React from 'react';
import styled from 'styled-components';
import { Canvas } from 'react-three-fiber';

const Scene = styled.div`
    width: 80%;
    height: 100vh;
    background: transparent;
    margin: 0 auto;
`;

const Ball = () => {
    return(
          <mesh position={[0, 0, 0]}>
              <sphereBufferGeometry args={[0.5, 16, 16]} />
              <meshPhysicalMaterial attach='material' color='red' />
          </mesh>
    );
}

const Display () => {
    return (
        <Scene>
            <Canvas>
            <ambientLight intensity={0.5}  />
            <Ball  />
            </Canvas>
        </Scene>
    );

export default Display;
}

---

The crashing comes next when I try to import few elements from @react-three/cannon and start my app.

import React from 'react';
import styled from 'styled-components';
import { Canvas } from 'react-three-fiber';
import { Physics, useSphere } from '@react-three/cannon';

const Scene = styled.div`
    width: 80%;
    height: 100vh;
    background: transparent;
    margin: 0 auto;
`;

const Ball = () => {

    const [ref] = useSphere(() => ({
        mass: 1,
        args: 1,
    }));

    return(
          <mesh ref={ref} position={[0, 0, 0]}>
              <sphereBufferGeometry args={[0.5, 16, 16]} />
              <meshPhysicalMaterial attach='material' color='red' />
          </mesh>
    );
}

const Display () => {
    return (
        <Scene>
            <Canvas>
            <ambientLight intensity={0.5}  />
            <Physics gravity={[0, -5, 0]}>
                <Ball  />
            </Physics>
            </Canvas>
        </Scene>
    );
}

export default Display;

---

After I hit npm start in the console Parcel starts to build the scripts but in a particular moment it starts spitting caracters causing a huge crash on my project. My editor (VSCode) kills the process after a few seconds to prevent the CPU to reach its 100%.

However, I don't really know what's the cause of this or if everyone faced the same problem before, since I'm not the only one who enjoys using React with Parcel it might be a must to have any solution related to this particular case. Thanks!

[driescroons]

Just stumbled upon the same issue as well. Found a fix for this or should I go back to using CRA? 😃

As mentioned by OP; my typescript parcel project works just fine until I add the use-cannon dependency. Once it builds it spits out lots of characters while building until it crashes.

Edit: So I temporarily managed to get a workaround for the issue described above. Here's what you have to do:

Copy and paste the source files in your project and put them in a folder called "cannon". Instead of referencing "use-cannon", just import from "./cannon".

There were errors complaining about worker not having a default export so I did a bit of googling and came up with following solution. go to your Provider.tsx file and replace:

const [worker] = useState<Worker>(() => new CannonWorker() as Worker)

with

const [worker] = useState<Worker>(() => new Worker('./worker.js'))

and remove the import on top of your file. Add //@ts-nocheck if ts complains about the worker

Remove the package.json reference to either "@react-three/cannon" or "use-cannon" and install "cannon-es"

I have no idea why the rollup build doesn't work with parcel. @alileonainagas I also don't think this has anything to do with react, but more a parcel + use-cannon issue.

Here is a repo where I reproduced the issue: https://github.com/driescroons/parcel-use-cannon

Edit 2: It also seems like terser is causing the issue. When a change the module property in the package.json of use-cannon (or @react-three/cannon) from "module": "dist/index.js", to "module": "dist/debug/index.js", it seems to resolve the issue.

Edit 3: Also seems like passing the --no-source-map flag to parcel fixes the issue!

[stockhuman]

Hello folks, by any chance, would v0.5.4 fix this? The static worker import might have worked around these issues, though admittedly I'm not much or a parcel wrangler.

[driescroons]

@stockHuman that did not fix it :(

[stockhuman]

Thanks for the update.

[stockhuman]

Hey @driescroons, yarn add --dev parcel@next (at the time of writing: 2.0.0-beta.1) builds successfully. Marking invalid as it seems like a parcel bug.