Uncaught TypeError TypeError: Class constructor B cannot be invoked without 'new'

[arkayok]

I'm excited about looking at this navmesh libary, it looks awesome. But when I've tried to add recast-navigation to an existing React Three Fiber (& vite) project, as soon as I add the tag around my ground component (which is in fact a drei loaded model), I get this error message:

Uncaught TypeError TypeError: Class constructor B cannot be invoked without 'new'

My googling seems to indicate it may be related to ECMAScript version mismatch, but I've run out of ideas on how to address it.
I've added the suggested exclude (optimizeDeps: { exclude: ['recast-navigation'] },) in vite.config.js, but that doesn't make any difference to the error.

Can anyone suggest where I could start looking to try to track this down?

My package.json dependencies look like this:

"dependencies": {
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@mui/icons-material": "^5.15.18",
"@mui/material": "^5.15.18",
"@react-three/drei": "^9.74.14",
"@react-three/fiber": "^8.13.0",
"@types/three": "^0.152.1",
"leva": "^0.9.35",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"recast-navigation": "^0.30.0",
"suspend-react": "^0.1.3",
"three": "^0.153.0",
"uuid": "^9.0.1"
},
"devDependencies": {
"@react-three/eslint-plugin": "^0.1.1",
"@types/react": "^18.0.37",
"@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^4.0.0",
"eslint": "^8.38.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
"vite": "^4.3.9"
}

Thanks for any help in advance :-)

[arkayok]

Wow, thanks for getting back to me so quickly.
Yes, I'm calling init in the the component, in the way I saw in the example:

suspend(() => init(), []);

Adding just the suspend to the component code was fine, adding the tag the the exception.

Sadly I don't have a github repo for the project, and it'll take me a while to set up a sandbox. I'd have to cut down the app to bare minimum of course. I was hoping this was maybe just a newbie error. Anyway I'll try to come up with a minimal sandbox that exhibits the problem and get back to you.

Thanks again for your quick response, and kudos on the work you've done here, it looks very excellent indeed :-)

[arkayok]

Oh my, sorry about the fire drill. I've discovered I just fatfingered when copying code from the example, examples/parcel-example/index.jsx. Once I'd corrected my hasty copy & paste things are working fine and I'm able to see the NavMeshHelper.

Looking good!
Thanks again for all your hard work!!
Cheers.

[isaac-mason]

Good to hear!

I think I accidentally deleted my reply, not sure what happened.

What was missing from the copy/paste out of curiosity?

[arkayok]

Errrrm, most of it actually ;-) I'd not copied across the embedded NavMesh component from the example file, and the IDE had quietly resolved that symbol to NavMesh in recast-navigation. Duh. Don't tell anybody, pretty embarrassing...

[isaac-mason]

Haha no worries 😆 Glad you got it working