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. (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')
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.