RecastJSPlugin, Typescript, ES6

Fuck me dead! Dude you really know everything about everything! Kudos!! :muscle:

However to earn some credits for myself I know about the webpack 4 to 5 issue

just wanted to see his setup and create a ready made solution but NGL I am not a React guy and never heard about craco :smiley:

Thanks dude! You rule!

@hvnsNight I will pass the issue to Jeremy who seems to be mastering this area as wel!!

cross-env NODE_OPTIONS=openssl-legacy-provider will fix node17/webpack4 jackassery. You may need this for quasar if you upgrade node and get some error in your console about crypto

1 Like

Thx! I started to switch to YUKA in my project already to avoid all this bullshit developers are experiencing with recast. I admit it may come from lack of knowledge but YUKA is just so simple to use.

Actually I already had this problem with quasar but the error messages were clearly describing that webpack 5 has dropped the pollyfils and what do I need to do to get it working. I don’t know where these exact descriptions came from but now I’m curious. Any idea?

Edit: the errors in the demo project provided by @hvnsNight didn’t tell anything about fixing the issue

Probably the quasar cli just does a simple error check, which webpack could do too , but then that would cost them consulting dollars.

O btw i meant to mention, some stuff here may be complementary to yuka

1 Like

There’s also a breaking change listed in 5.0 what’s new.

Recast.js needs to be initialized before creating the plugin with await Recast(); since Recast introduced an async init in their library.
1 Like

I’ve tried doing both of these suggested alternatives but this is unfortunately beyond what I can understand in terms of these deeper environment configs.

I’m not sure how to craft a craco configuration file that would make sense for my project and how to incorporate the node-poyfill stuff to fix the recast issue (and on top of this I had to use craco@v7.0.0-alpha.0 to bypass the issue of Craco not supporting CRA 5 yet) and i have no idea which plugins array should I be adding the NodePolyfillPlugin on the webpack config file haha. Could you point me into which array within webpack.config.js I need to add the variable?

I’ll either try Yuka as mentioned or make my own simple navigation logic. I can tell that the current state of babylon and recast is not friendly at all for developing games. Thanks for everybody’s input!

1 Like

You should then revise you project setup if nothing works for you. However I could easily add the NavPlugin to this React project. Just had to apply the trick with the export namespace.
catrun.zip (1.5 MB)
The project was done by someone on the forum, I was helping him with another issue.

If you opt for YUKA you should be aware that it’s navigation capabilities are not as sophisticated as recast-detour’s. But you can get very close by combining multiple YUKA behaviours on your nav agents.

1 Like

Thanks for your reply, finding it hard to find time to figure this out :(. I did try the provided project, unfortunately this is what i get upon npm start:

Quite odd. From what i’ve googled, it seems to be a discrepancy between node versions, or a memory leak. I’m using node 16.13.1. Is there a chance you or the OP are using an older node version?

I will just try Yuka and see if I can achieve my goal. I also compared the project you linked with mine and they are virtually the same, with the same dependencies and version numbers.

the only time i can remember running into that error is trying to glob delete all the node_modules on my c drive. you can try passing a command line arg of --max-old-space=4096 to increase node’s memory limit. the default is 1024. it probably won’t help, but it might.

1 Like

Hey guys!
I was forced to upgrade my project to Quasar2 (Vue3) which comes with WebPack5. The previous version of Quasar used WebPack4. The only thing I needed to change was to:

npm i --save-dev node-polyfill-webpack-plugin

and add this to the quasar.config.js file:

chainWebpack(chain) {
  const nodePolyfillWebpackPlugin = require('node-polyfill-webpack-plugin')
  chain.plugin('node-polyfill').use(nodePolyfillWebpackPlugin)
},
extendWebpack(cfg) {
  cfg.resolve.fallback = {
    fs: false
  }
}

No other changes to recast needed with this setup: RecastJSPlugin, Typescript, ES6

If you are using webpack without any other framework like Quasar the approach is similar, just tweak the webpack config in a similar way.

R.

2 Likes

Hi, I met the related problem, when importing ‘recast-detour’ package,

import * as BABYLON from '@babylonjs/core'
import Recast from 'recast-detour'

const recast = await Recast
const navigationPlugin = new BABYLON.RecastJSPlugin(recast)

the error is blow:

SyntaxError: The requested module '....XXX' does not provide an export named 'fileURLToPath'

It seems about the ES6 module input error. Accourding to your share, I change the first line of d.ts file. But did not work it out. And my package.json is like

"@babylonjs/core": "^5.13.3",
"recast-detour": "^1.5.0",
"vue": "^3.2.33",

I think that was asked in a different thread, right? I believe the recast plugin is UMD-oriented and not fully ready to be used in an es modules environment.

1 Like

Yes! That’s the reason recast plugin cannot be used. I did not compile this package when using tsup to build project. And it works!

2 Likes