Hi there! I want to use NavSystem in my project by RecastJsPlugin, but i have some problem with importing plugin in project, i got an error: ReferenceError: Recast is not defined, also i found similar topic in forum but it’s didn’t help me. Maybe anyone can help me with this problem? Thanks in advance.
cc @Cedric
Hi @deslancers
I’ve release a 1.6.0 recast plugin yesterday.
It contains more flavors of the .JS modules.
Depending on how you integrate it in your project (ES6, UMD,…)
1 Like
i installed it from npm recast-detour repo
do you have a repo that we can look at?
I’m taking a look
1 Like
ping @RaananW
1 Like
Let’s see… 
The new recast package is a wasm-based export of recast. It requires initialization before it is used.
The simplest way to do that is this (from your code!)
import * as Recast from "recast-detour";
// ...
// initialize the recast plugin
const navigationPlugin = new RecastJSPlugin(await (Recast as any)());
This is possible because you defined the createScene function as async. The cast to any is needed at the moment because of an issue we have with the typings. We will solve this and update the package. Until then, the cast is needed. Remove the line that sents the workers URL, and you are good to go.
2 Likes
it works, thank you!
2 Likes
Hi RaananW,
This does not seem to work for me:
If i try to use it with
import * as Recast from "recast-detour";
const navigationPlugin = new RecastJSPlugin(await (Recast as any)());
i get an error that Recast is not a function
I’ve also tried to import recast like this:
import Recast from 'recast-detour';
export async function createNavigationPlugin() {
return new BABYLON.RecastJSPlugin(await Recast());
}
which throws an error in the recast.es6.js module on the following line:
this["Recast"]=Module; // this is undefined here
I am using the 1.6.2 version, any idea’s what could cause that? (also tried the 1.6.0 version, same result)
I actually tested it in my template and it does work as expected (still with the anycast until this is fixed).
Care to share a project where it doesn’t work? I will be happy to help debugging this
1 Like
recast-issue.zip (8.4 KB)
Thanks!
I’ve made a quick project with the bare minimum to reproduce the issue.
It’s setup with vite + typescript + recast-detour + babylonjs
to set up:
npm install /
npm run dev
oh wow. I want to express my opinion about the person who thought adding a this reference in an auto-generated es6 module, but I keep my opinions to myself
So! the issue is, well, a this reference that is problematic if you are calling the recast function outside of a defined scope (i.e. at the base level of your app). ES6 doesn’t automatically makes window the this variable to functions running in the main scope, as it is a module! which makes perfect sense.
Long story short - if you do it inside a class it will work. If not, you can always use call and pass a reference. It’s ugly, but we will need to find a solution that works best for emscripten.
Using call:
const plugin = new RecastJSPlugin(await (Recast).call({}));
I’ll work with @Cedric to find a solution to the auto-generated es6 module. Thanks for the patience
**EDIT - removed the class for now, need to debug this as well
2 Likes
Hi RaananW,
I suspected that ‘this’ was supposed to be a reference of window, so i had tried to bind the window to the Recast call which didn’t work (to be fair, i don’t fully understand when to use / not to use the .bind() method)
Thanks a lot for the workaround, i’ll use that for now
yeah, bind would have worked if you called it afterwards. call’s first variable is the "this"context, which is what you need here
For worker compatibility using globalThis instead of window and self instead of this may be helpful to some
1 Like
In es6 there is no need to use window or this at all. maybe in worker, but in a worker this would be populated for you.
Fwiw, In workers with type module, top level this is undefined. Anyway, like u said, the bundler output is incorrect
1 Like