Using Recast.js via NPM package import

[roland]

Hi!

@Rata_Blanca

It’s strange but now I have “File: …/node_modules/recast-detour/raycast.d.ts is not a module” on line:

You can “fix” this issue like this:

@roland

Open node_modules/recast-detour/recast.d.ts and edit the first line
Change declare module Recast to export namespace Recast

The webpack 5 issues can be fixed as well:

@roland

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.

Have a look at the full topic here:

RecastJSPlugin, Typescript, ES6

Hello! If you couldn’t get this setup working, because you were not able to import Recast always getting ‘File is not a module error’, than follow this: npm i recast-detour Open node_modules/recast-detour/recast.d.ts and edit the first line Change declare module Recast to export namespace Recast After this you can simply: import * as Recast from 'recast-detour' You need to import { RecastJSPlugin } from '@babylonjs/core' to get the whole thing working, obviously… Pass Recast to the plugi…

Hopefully this helps!

R.

[Rata_Blanca]

Ok, I just given a try to use recast-detour and looks I’ve failed one more time.
Now I made build broken build and uploaded it to GitHub.
Can someone please take a look at this? What do I do wrong here?

Uncaught (in promise) TypeError: this.bjsRECAST.Vec3 is not a constructor

The minimal project build with its sources is here:

testes/navmesh_test0 at main · ProgrammingLife/testes

[RaananW]

You need to make sure to initialize the recast detour package:

Creating A Navigation Mesh | Babylon.js Documentation

[Rata_Blanca]

@RaananW

You need to make sure to initialize the recast detour package:

Yeah, I have it installed:

$ npm list | grep -i recast
├── recast-detour@1.6.2

But at this line:

import * as Recast from "recast-detour";
//...
const recast = new Recast(); // <--

I get this error:

This expression is not constructable.
  Type 'typeof import("/home/rata/projects/node_modules/recast-detour/recast")' has no construct signatures. (tsserver 2351)

Is this the right package? Maybe it’s too fresh?

[labris]

You have Recast installed but not initialized.
Please have a look how it is done here - babylonjs-webpack-es6/navigationMeshRecast.ts at master · RaananW/babylonjs-webpack-es6 · GitHub

[Rata_Blanca]

Looks I’ve one more trouble with the typescript and recast-detour. My typescript gets the error when trying to compile recast-detour:

ERROR in /home/rata/projects/node_modules/recast-detour/recast.d.ts
115:36-37
[tsl] ERROR in /home/rata/projects/node_modules/recast-detour/recast.d.ts(115,37)
      TS1005: '(' expected.
ts-loader-default_e3b0c44298fc1c14

The last line of recast.d.ts that are the root of the problem look like this:

export default () => Promise<Recast>;

$ tsc --v                                                                                                                                 
Version 4.8.2

[roland]

Hey!

This setup always worked for all my TS based projects:

package.json

    "recast-detour": "^1.5.0",

class

import 'recast-detour'
import 'RecastJSPlugin' from '@babylonjs/core'
import Recast from 'src/recast/recast'
...
private _navigationPlugin?: RecastJSPlugin
...
private async _setupCrowd() {
  const recast = await Recast()
  const navigationPlugin = new RecastJSPlugin(recast)
  this._navigationPlugin = navigationPlugin
  ...
}

Download https://babylonjs.xyz/recast.js and put it into src/recast:

And modify the file recast.d.ts as seen here:

[Adlee_Xavier]

That worked for me