# How to correct enable RecastJsPlugin?

**URL:** <https://forum.babylonjs.com/t/how-to-correct-enable-recastjsplugin/35996>\
**Category:** Questions\
**Created:** [November 24, 2022, 4:41pm UTC](https://forum.babylonjs.com/t/how-to-correct-enable-recastjsplugin/35996 "2022-11-24T16:41:54Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![deslancers](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deslancers/32/17620_2.png) [@deslancers](https://forum.babylonjs.com/u/deslancers)\
**Post date:** [November 24, 2022, 4:41pm UTC](https://forum.babylonjs.com/t/how-to-correct-enable-recastjsplugin/35996/1 "2022-11-24T16:41:54Z")

</div>

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.

 ![Screenshot_20221124_183739](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/3/f394590877373a8124adef770f4414447691041b.png)

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [November 24, 2022, 5:12pm UTC](https://forum.babylonjs.com/t/how-to-correct-enable-recastjsplugin/35996/2 "2022-11-24T17:12:31Z")

</div>

cc @Cedric

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [November 24, 2022, 5:15pm UTC](https://forum.babylonjs.com/t/how-to-correct-enable-recastjsplugin/35996/3 "2022-11-24T17:15:32Z")

</div>

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,…)

---

<div class="post-metadata">

**Author:** ![deslancers](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deslancers/32/17620_2.png) [@deslancers](https://forum.babylonjs.com/u/deslancers)\
**Post date:** [November 24, 2022, 5:24pm UTC](https://forum.babylonjs.com/t/how-to-correct-enable-recastjsplugin/35996/4 "2022-11-24T17:24:57Z")

</div>

i installed it from npm recast-detour repo  
 ![Screenshot_20221124_192552](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/7/27b73e51481e96079d043f0b57907acb45a74cee.png)

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [November 24, 2022, 5:25pm UTC](https://forum.babylonjs.com/t/how-to-correct-enable-recastjsplugin/35996/5 "2022-11-24T17:25:55Z")

</div>

do you have a repo that we can look at?

---

<div class="post-metadata">

**Author:** ![deslancers](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deslancers/32/17620_2.png) [@deslancers](https://forum.babylonjs.com/u/deslancers)\
**Post date:** [November 24, 2022, 5:29pm UTC](https://forum.babylonjs.com/t/how-to-correct-enable-recastjsplugin/35996/6 "2022-11-24T17:29:14Z")

</div>

> **[GitHub - deslancer/wayfinding-demo](https://github.com/deslancer/wayfinding-demo)**
>
> Contribute to deslancer/wayfinding-demo development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [November 25, 2022, 4:01pm UTC](https://forum.babylonjs.com/t/how-to-correct-enable-recastjsplugin/35996/7 "2022-11-25T16:01:23Z")

</div>

I’m taking a look

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [November 25, 2022, 4:40pm UTC](https://forum.babylonjs.com/t/how-to-correct-enable-recastjsplugin/35996/8 "2022-11-25T16:40:58Z")

</div>



---

<div class="post-metadata">

**Author:** ![Cedric](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cedric/32/2742_2.png) [@Cedric](https://forum.babylonjs.com/u/Cedric)\
**Post date:** [November 28, 2022, 1:49pm UTC](https://forum.babylonjs.com/t/how-to-correct-enable-recastjsplugin/35996/9 "2022-11-28T13:49:21Z")

</div>

ping @RaananW

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [November 28, 2022, 2:18pm UTC](https://forum.babylonjs.com/t/how-to-correct-enable-recastjsplugin/35996/10 "2022-11-28T14:18:52Z")

</div>

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!)

```javascript
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.

---

<div class="post-metadata">

**Author:** ![deslancers](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deslancers/32/17620_2.png) [@deslancers](https://forum.babylonjs.com/u/deslancers)\
**Post date:** [November 30, 2022, 11:44am UTC](https://forum.babylonjs.com/t/how-to-correct-enable-recastjsplugin/35996/11 "2022-11-30T11:44:01Z")

</div>

it works, thank you!

---

<div class="post-metadata">

**Author:** ![Yannis\_Standaert](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/yannis_standaert/32/27324_2.png) [@Yannis\_Standaert](https://forum.babylonjs.com/u/Yannis_Standaert)\
**Post date:** [November 30, 2022, 3:59pm UTC](https://forum.babylonjs.com/t/how-to-correct-enable-recastjsplugin/35996/12 "2022-11-30T15:59:54Z")

</div>

Hi RaananW,

This does not seem to work for me:  
If i try to use it with

```auto
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:

```auto
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:

```auto
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)

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [November 30, 2022, 4:02pm UTC](https://forum.babylonjs.com/t/how-to-correct-enable-recastjsplugin/35996/13 "2022-11-30T16:02:01Z")

</div>

I actually tested it in my template and it does work as expected (still with the `any`cast until this is fixed).

> <https://github.com/RaananW/babylonjs-webpack-es6/blob/master/src/scenes/navigationMeshRecast.ts#L32>

Care to share a project where it doesn’t work? I will be happy to help debugging this

---

<div class="post-metadata">

**Author:** ![Yannis\_Standaert](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/yannis_standaert/32/27324_2.png) [@Yannis\_Standaert](https://forum.babylonjs.com/u/Yannis_Standaert)\
**Post date:** [November 30, 2022, 4:15pm UTC](https://forum.babylonjs.com/t/how-to-correct-enable-recastjsplugin/35996/14 "2022-11-30T16:15:41Z")

</div>

[recast-issue.zip](https://forum.babylonjs.com/uploads/short-url/87yiAmQLxZyASZ33ZbCu9uyDwpG.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:

```auto
npm install /
npm run dev

```

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [November 30, 2022, 5:02pm UTC](https://forum.babylonjs.com/t/how-to-correct-enable-recastjsplugin/35996/15 "2022-11-30T17:02:20Z")

</div>

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`:

```javascript
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

---

<div class="post-metadata">

**Author:** ![Yannis\_Standaert](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/yannis_standaert/32/27324_2.png) [@Yannis\_Standaert](https://forum.babylonjs.com/u/Yannis_Standaert)\
**Post date:** [November 30, 2022, 5:23pm UTC](https://forum.babylonjs.com/t/how-to-correct-enable-recastjsplugin/35996/16 "2022-11-30T17:23:19Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [November 30, 2022, 5:30pm UTC](https://forum.babylonjs.com/t/how-to-correct-enable-recastjsplugin/35996/17 "2022-11-30T17:30:18Z")

</div>

yeah, bind would have worked if you called it afterwards. call’s first variable is the "this"context, which is what you need here

---

<div class="post-metadata">

**Author:** ![jeremy-coleman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jeremy-coleman/32/15493_2.png) [@jeremy-coleman](https://forum.babylonjs.com/u/jeremy-coleman)\
**Post date:** [November 30, 2022, 5:37pm UTC](https://forum.babylonjs.com/t/how-to-correct-enable-recastjsplugin/35996/18 "2022-11-30T17:37:50Z")

</div>

For worker compatibility using globalThis instead of window and self instead of this may be helpful to some

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [November 30, 2022, 8:06pm UTC](https://forum.babylonjs.com/t/how-to-correct-enable-recastjsplugin/35996/19 "2022-11-30T20:06:33Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jeremy-coleman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jeremy-coleman/32/15493_2.png) [@jeremy-coleman](https://forum.babylonjs.com/u/jeremy-coleman)\
**Post date:** [November 30, 2022, 10:40pm UTC](https://forum.babylonjs.com/t/how-to-correct-enable-recastjsplugin/35996/20 "2022-11-30T22:40:20Z")

</div>

Fwiw, In workers with type module, top level this is undefined. Anyway, like u said, the bundler output is incorrect

[Next page](https://forum.babylonjs.com/t/how-to-correct-enable-recastjsplugin/35996.md?page=2)