# Using Recast.js via NPM package import

**URL:** <https://forum.babylonjs.com/t/using-recast-js-via-npm-package-import/21225>\
**Category:** Questions\
**Tags:** tutorial\
**Created:** [May 28, 2021, 12:00pm UTC](https://forum.babylonjs.com/t/using-recast-js-via-npm-package-import/21225 "2021-05-28T12:00:06Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cocojambo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cocojambo/32/16203_2.png) [@Cocojambo](https://forum.babylonjs.com/u/Cocojambo)\
**Post date:** [May 28, 2021, 12:00pm UTC](https://forum.babylonjs.com/t/using-recast-js-via-npm-package-import/21225/1 "2021-05-28T12:00:06Z")

</div>

Hi. I’m trying to reproduce this example [Babylon.js Playground](https://playground.babylonjs.com/#6AE0RP) in my Nuxt (Vue) environment. It works correctly if I include **Recast** library via `<script src="https://preview.babylonjs.com/recast.js"></script>`

But I’d like to use import for that. So I’ve installed recast npm package but cannot bind BABYLON.RecastJSPlugin with that. Please pay attention to line 24

**Sandbox** : [CodeSandbox](https://codesandbox.io/s/zen-wildflower-rnlgd?file=/pages/index.vue:632-654)

I also tried to use `recast-detour` but there is an another issue with that

> This dependency was not found:
> 
> - fs in ./node\_modules/recast-detour/recast.js

---

<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:** [May 28, 2021, 3:13pm UTC](https://forum.babylonjs.com/t/using-recast-js-via-npm-package-import/21225/2 "2021-05-28T15:13:48Z")

</div>

The raycast plugin constructor accepts a different version of recast other than the one populated in the global namespace. you will need to pass the imported recast package to the constructor

---

<div class="post-metadata">

**Author:** ![Cocojambo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cocojambo/32/16203_2.png) [@Cocojambo](https://forum.babylonjs.com/u/Cocojambo)\
**Post date:** [May 28, 2021, 3:30pm UTC](https://forum.babylonjs.com/t/using-recast-js-via-npm-package-import/21225/3 "2021-05-28T15:30:18Z")

</div>

I tried to pass it to the plugin:

`let navigationPlugin = new BABYLON.RecastJSPlugin(recast);`

But it returns an error:

> this.bjsRECAST.Vec3 is not a constructor

Could you explain how I can do it properly?

---

<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:** [May 28, 2021, 3:32pm UTC](https://forum.babylonjs.com/t/using-recast-js-via-npm-package-import/21225/4 "2021-05-28T15:32:35Z")

</div>

you should probably `import react from 'react'` and not `* as reacst`. I can’t seem to be able to edit the demo you sent, so I can’t play around with it. just make sure recast is a container.

---

<div class="post-metadata">

**Author:** ![Cocojambo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cocojambo/32/16203_2.png) [@Cocojambo](https://forum.babylonjs.com/u/Cocojambo)\
**Post date:** [May 28, 2021, 4:11pm UTC](https://forum.babylonjs.com/t/using-recast-js-via-npm-package-import/21225/5 "2021-05-28T16:11:27Z")

</div>

> import react from ‘react’

I guess you meant recast (not react).

To edit this sandbox you need to be logged in to make ability clone it.  
I would use BabylonJS sandbox but it already uses Recast.

**Updated** : [CodeSandbox](https://codesandbox.io/s/zen-wildflower-rnlgd?file=/pages/index.vue)

---

<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:** [May 28, 2021, 5:17pm UTC](https://forum.babylonjs.com/t/using-recast-js-via-npm-package-import/21225/6 "2021-05-28T17:17:48Z")

</div>

That’s not the right reacst import - [https://www.npmjs.com/package/recast](https://www.npmjs.com/package/recast)

You want this - [recastjs - npm](https://www.npmjs.com/package/recastjs)

---

<div class="post-metadata">

**Author:** ![Cocojambo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cocojambo/32/16203_2.png) [@Cocojambo](https://forum.babylonjs.com/u/Cocojambo)\
**Post date:** [May 28, 2021, 8:15pm UTC](https://forum.babylonjs.com/t/using-recast-js-via-npm-package-import/21225/7 "2021-05-28T20:15:53Z")

</div>

Tried many variants but still no luck.  
I have installed recastjs (+recast, the first one requires it).  
But even only with one requiring string it fails.  
A new sandbox: [CodeSandbox](https://codesandbox.io/s/competent-violet-q5xp4?file=/pages/index.vue)

> ERROR in ./node\_modules/recastjs/lib/recast.js  
> Module not found: Error: Can’t resolve ‘fs’ in ‘/sandbox/node\_modules/recastjs/lib’

I tried to fix it via Nuxt configuration. If you uncomment lines in nuxt.config.js this error will gone. But the next one will appear 😐

> Cannot read property ‘match’ of undefined

Also I found that it happens because of checking process.platform in that recast library.

I have no clue how to use it. Docs says [https://github.com/vincent/recast.js/tree/master/getting-started](https://github.com/vincent/recast.js/tree/master/getting-started) that we can use node version or browser. I am going to run my code only in browser. But I need to merge all the code into one dist file. That’s why I am trying to use node version.

---

<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:** [May 31, 2021, 12:11pm UTC](https://forum.babylonjs.com/t/using-recast-js-via-npm-package-import/21225/8 "2021-05-31T12:11:06Z")

</div>

There is sometimes little we can do about it, especially when it comes to external dependencies.  
You might want to build recast yourself without the external dependencies, or make sure the `fs` package is somehow mocked. I am sorry that I cannot be of any help.

We do provide recast as a compiled library that uses the global namespace. I know it’s frowned upon, but there are certain edge cases (i think you found one), where it would make sense to use those packages as they are.

I would recommend talking to recast about it, maybe submit an issue there.

---

<div class="post-metadata">

**Author:** ![slin](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/slin/32/36084_2.png) [@slin](https://forum.babylonjs.com/u/slin)\
**Post date:** [September 14, 2021, 8:58pm UTC](https://forum.babylonjs.com/t/using-recast-js-via-npm-package-import/21225/9 "2021-09-14T20:58:41Z")

</div>

Hi @Cocojambo

I encountered the error as well after I upgraded babylon version.

> this.bjsRECAST.Vec3 is not a constructor

I used to only need this line before creating the RecastJSPlugin instance.

```
window.Recast = require('recast-detour');

```

After upgrading babylon version, I had the error above. Now I need to do the following to fix the error.

```
window.Recast = require('recast-detour');
window.Recast();

```

---

<div class="post-metadata">

**Author:** ![alamboley](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/alamboley/32/24398_2.png) [@alamboley](https://forum.babylonjs.com/u/alamboley)\
**Post date:** [May 16, 2022, 3:07pm UTC](https://forum.babylonjs.com/t/using-recast-js-via-npm-package-import/21225/10 "2022-05-16T15:07:48Z")

</div>

Hey,

Had a hard time here too, but I finally succeed. My project is based on this template [GitHub - RaananW/babylonjs-webpack-es6: Babylon.js basic scene with typescript, webpack, es6 modules, editorconfig, eslint, hot loading and more. Will even make coffee if you ask nicely.](https://github.com/RaananW/babylonjs-webpack-es6).

```auto
npm install recast-detour

```

In _src/externalFileTypes.d.ts_ add the line **declare module “recast-detour”;**

Create a file _src/externals/recast.ts_

```auto
import * as Recast from 'recast-detour';

export let recastModule: any;
export const recastReadyPromise = new Promise((resolve) => {
    new Recast().then((res: unknown) => {
        recastModule = res;
        resolve(res);
    });
});

```

Then

```auto
import * as Recast from 'recast-detour';

this.recast = await new Recast();

this.recastPlugin = new RecastJSPlugin(this.recast);

```

Hope that help!

---

<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:** [May 16, 2022, 4:07pm UTC](https://forum.babylonjs.com/t/using-recast-js-via-npm-package-import/21225/11 "2022-05-16T16:07:12Z")

</div>

Awesome! do you want to add an example to the template repository so others can benefit from it? i’d be happy to accept a PR for that!!

---

<div class="post-metadata">

**Author:** ![alamboley](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/alamboley/32/24398_2.png) [@alamboley](https://forum.babylonjs.com/u/alamboley)\
**Post date:** [May 17, 2022, 7:19am UTC](https://forum.babylonjs.com/t/using-recast-js-via-npm-package-import/21225/12 "2022-05-17T07:19:30Z")

</div>

I’ll try in the next days, thanks for the opportunity!

---

<div class="post-metadata">

**Author:** ![Rata\_Blanca](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rata_blanca/32/24779_2.png) [@Rata\_Blanca](https://forum.babylonjs.com/u/Rata_Blanca)\
**Post date:** [September 13, 2022, 8:29pm UTC](https://forum.babylonjs.com/t/using-recast-js-via-npm-package-import/21225/13 "2022-09-13T20:29:53Z")

</div>

> [@alamboley](#):
>
> `npm install recast-detour`

Can’t even compile my TS code that using recast-detour 😀

```auto
ERROR in ../../../node_modules/recast-detour/recast.js 9:4815-4828
Module not found: Error: Can't resolve 'fs' in '/home/user/node/node_modules/recast-detour'
resolve 'fs' in '/home/user/node/node_modules/recast-detour'
  Parsed request is a module
    using description file: /home/user/node/node_modules/recast-detour/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /home/user/node/node_modules/recast-detour/node_modules doesn't exist or is not a directory
      /home/user/node/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /home/user/node/node_modules
        single file module
          using description file: /home/user/node/package.json (relative path: ./node_modules/fs)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              /home/user/node/node_modules/fs doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              /home/user/node/node_modules/fs.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              /home/user/node/node_modules/fs.tsx doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              /home/user/node/node_modules/fs.js doesn't exist
        /home/user/node/node_modules/fs doesn't exist
      /home/user/node/node_modules doesn't exist or is not a directory
      /home/user/node/node_modules doesn't exist or is not a directory
      /home/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory

```

---

<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:** [September 13, 2022, 8:36pm UTC](https://forum.babylonjs.com/t/using-recast-js-via-npm-package-import/21225/14 "2022-09-13T20:36:33Z")

</div>

cc @RaananW

---

<div class="post-metadata">

**Author:** ![Rata\_Blanca](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rata_blanca/32/24779_2.png) [@Rata\_Blanca](https://forum.babylonjs.com/u/Rata_Blanca)\
**Post date:** [September 14, 2022, 5:49am UTC](https://forum.babylonjs.com/t/using-recast-js-via-npm-package-import/21225/15 "2022-09-14T05:49:05Z")

</div>

Ok, the first issue was fixed with changing:

> **webpack5 config**
>
> ```auto
> resolve: {
> fallback: {
> fs: false, //!!! Not "empty"! as it was in webpack4
> browser: false,
> },
> },
> 
> ```

It’s strange but now I have “_File: …/node\_modules/recast-detour/raycast.d.ts is not a module_” on line:

```auto
import * as Recast from "recast-detour";

```

Tried to solve with:

```auto
webidl2ts -i https://raw.githubusercontent.com/BabylonJS/Extensions/master/recastjs/recast.idl -o recast.d.ts

```

it gives me an error message:

> **Error message**
>
> ```auto
> WebIDLParseError: Syntax error at line 23, since `interface rcConfig`:
> attribute float[] bmin; 
> ^ Attribute lacks a name
> at Tokeniser.error (/home/denis/.local/lib/node_modules/webidl2ts/node_modules/webidl2/dist/webidl2.js:1:19433)
> at parse (/home/denis/.local/lib/node_modules/webidl2ts/node_modules/webidl2/dist/webidl2.js:1:13800)
> at Function.parse (/home/denis/.local/lib/node_modules/webidl2ts/node_modules/webidl2/dist/webidl2.js:1:23168)
> at Function.parse (/home/denis/.local/lib/node_modules/webidl2ts/node_modules/webidl2/dist/webidl2.js:1:26441)
> at i (/home/denis/.local/lib/node_modules/webidl2ts/node_modules/webidl2/dist/webidl2.js:1:32064)
> at o (/home/denis/.local/lib/node_modules/webidl2ts/node_modules/webidl2/dist/webidl2.js:1:32259)
> at /home/denis/.local/lib/node_modules/webidl2ts/node_modules/webidl2/dist/webidl2.js:1:32622
> at B (/home/denis/.local/lib/node_modules/webidl2ts/node_modules/webidl2/dist/webidl2.js:1:32754)
> at Module.F (/home/denis/.local/lib/node_modules/webidl2ts/node_modules/webidl2/dist/webidl2.js:1:32915)
> at Object.<anonymous> (/home/denis/.local/lib/node_modules/webidl2ts/dist/parse-idl.js:47:43) {
> bareMessage: 'Attribute lacks a name',
> context: 'Syntax error at line 23, since `interface rcConfig`:\n' +
> ' attribute float[] bmin; \n' +
> ' ^',
> line: 23,
> sourceName: undefined,
> input: '[] bmin; \n' +
> '\n' +
> " /// The maximum bounds of the field's AABB. [(x, y, z)] [Units: wu]\n" +
> ' attribute',
> tokens: [
> { type: '[', value: '[', trivia: '', line: 23, index: 34 },
> { type: ']', value: ']', trivia: '', line: 23, index: 35 },
> {
> 
> ...
> Node.js v17.0.1
> 
> ```

@Cedric, don’t you know what’s wrong with my `webidl2ts` attempt?

In my browser I have: `Uncaught (in promise) TypeError: Recast is not a constructor` because I don’t know how to include Recast in my final js-bundle 😀  
In TS I use

> **the following code**
>
> ```auto
> import * as Recast from "recast-detour"; 
> //<-- I removed recast.d.ts for now to flush the error "is not a module"
> import { RecastJSPlugin } from '@babylonjs/core';
> 
> ( async () => {
> const recast = await new Recast();
> const navigationPlugin = new RecastJSPlugin( recast );
> navigationPlugin.setWorkerURL( "workers/navMeshWorker.js" );
> } ) ();
> 
> ```

well might be I’m having this problem because of removing recast.d.ts so it not imports into a final js bundle 😀

If I manually download recast.js and include it as a script in my HTML file, I get this error:

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

```

---

<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:** [September 14, 2022, 10:41am UTC](https://forum.babylonjs.com/t/using-recast-js-via-npm-package-import/21225/16 "2022-09-14T10:41:26Z")

</div>

We will need to see how the package is built and what can be done to improve this.

Can you share a reproduction of your issue? since I can see others are using it correctly.

---

<div class="post-metadata">

**Author:** ![Rata\_Blanca](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rata_blanca/32/24779_2.png) [@Rata\_Blanca](https://forum.babylonjs.com/u/Rata_Blanca)\
**Post date:** [September 14, 2022, 11:09am UTC](https://forum.babylonjs.com/t/using-recast-js-via-npm-package-import/21225/17 "2022-09-14T11:09:19Z")

</div>

> [@RaananW](#):
>
> We will need to see how the package is built and what can be done to improve this.

Well, I didn’t build it by my own. Tried to build it but emspripten can’t locate my libsdl2-dev installation when it’s installed successfully and SDL2\_LIBRARY, SDL2\_INCLUDE\_DIR points to correct places.

> **My first case of trying to get recast to work.**
>
> ```auto
> $ npm i recast-detour
> 
> ```
> 
> TS:
> 
> ```auto
> import * as Recast from "recast-detour"; // File '...../node_modules/recast-detour/recast.d.ts' is not a module.
> 
> ```
> 
> Trying to fix this:
> 
> ```auto
> webidl2ts -i https://raw.githubusercontent.com/BabylonJS/Extensions/master/recastjs/recast.idl -o recast.d.ts
> 
> ```
> 
> > **error message**
> >
> > ```auto
> > WebIDLParseError: Syntax error at line 23, since `interface rcConfig`:
> > attribute float[] bmin; 
> > ^ Attribute lacks a name
> > at Tokeniser.error (/home/denis/.local/lib/node_modules/webidl2ts/node_modules/webidl2/dist/webidl2.js:1:19433)
> > at parse (/home/denis/.local/lib/node_modules/webidl2ts/node_modules/webidl2/dist/webidl2.js:1:13800)
> > at Function.parse (/home/denis/.local/lib/node_modules/webidl2ts/node_modules/webidl2/dist/webidl2.js:1:23168)
> > at Function.parse (/home/denis/.local/lib/node_modules/webidl2ts/node_modules/webidl2/dist/webidl2.js:1:26441)
> > at i (/home/denis/.local/lib/node_modules/webidl2ts/node_modules/webidl2/dist/webidl2.js:1:32064)
> > at o (/home/denis/.local/lib/node_modules/webidl2ts/node_modules/webidl2/dist/webidl2.js:1:32259)
> > at /home/denis/.local/lib/node_modules/webidl2ts/node_modules/webidl2/dist/webidl2.js:1:32622
> > at B (/home/denis/.local/lib/node_modules/webidl2ts/node_modules/webidl2/dist/webidl2.js:1:32754)
> > at Module.F (/home/denis/.local/lib/node_modules/webidl2ts/node_modules/webidl2/dist/webidl2.js:1:32915)
> > at Object.<anonymous> (/home/denis/.local/lib/node_modules/webidl2ts/dist/parse-idl.js:47:43) {
> > bareMessage: 'Attribute lacks a name',
> > context: 'Syntax error at line 23, since `interface rcConfig`:\n' +
> > ' attribute float[] bmin; \n' +
> > ' ^',
> > line: 23,
> > sourceName: undefined,
> > input: '[] bmin; \n' +
> > '\n' +
> > " /// The maximum bounds of the field's AABB. [(x, y, z)] [Units: wu]\n" +
> > ' attribute',
> > tokens: [
> > { type: '[', value: '[', trivia: '', line: 23, index: 34 },
> > { type: ']', value: ']', trivia: '', line: 23, index: 35 },
> > {
> > 
> > ...
> > Node.js v17.0.1
> > 
> > ```
> 
> So it’s not an option.

* * *

> **My second case of trying to get recast to work.**
>
> > **TS**
> >
> > ```auto
> > import { RecastJSPlugin } from "@babylonjs/core/Navigation/Plugins/recastJSPlugin";
> > declare const Recast: any;
> > ...
> > ( async () => {
> > // const recast = await new Recast();
> > const recast = new Recast();
> > const navigationPlugin = new RecastJSPlugin( recast );
> > navigationPlugin.setWorkerURL( "libs/navMeshWorker.js" );
> > } ) ();
> > 
> > ```
> 
> Copying recast.js to my local project’s folder:
> 
> ```auto
> $ cp .../node_modules/recast-detour/recast.js .../my_project/build/libs/recast.js
> $ wget "https://raw.githubusercontent.com/BabylonJS/Babylon.js/master/packages/tools/playground/public/workers/navMeshWorker.js" -O .../my_project/build/libs/navMeshWorker.js
> 
> ```
> 
> > **HTML**
> >
> > ```auto
> > <script src="libs/recast.js"></script>
> > <script src="webpacked_bundle.js"></script>
> > 
> > ```
> 
> > **Error in browser console**
> >
> > ```auto
> > index.js:96949 Uncaught (in promise) TypeError: this.bjsRECAST.Vec3 is not a constructor
> > at new RecastJSPlugin
> > 
> > ```

---

<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:** [September 14, 2022, 11:11am UTC](https://forum.babylonjs.com/t/using-recast-js-via-npm-package-import/21225/18 "2022-09-14T11:11:04Z")

</div>

I didn’t say you built it on your own 🙂  
I just said we will need to see how it is built so we can understand what the issue is. @Cedric can help here for sure. We have a task to move those packages to the babylon org and on the way also make the es6 friendly. But that shouldn’t cause the issue you are experiencing.

---

<div class="post-metadata">

**Author:** ![Rata\_Blanca](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/rata_blanca/32/24779_2.png) [@Rata\_Blanca](https://forum.babylonjs.com/u/Rata_Blanca)\
**Post date:** [September 14, 2022, 11:16am UTC](https://forum.babylonjs.com/t/using-recast-js-via-npm-package-import/21225/19 "2022-09-14T11:16:47Z")

</div>

> [@RaananW](#):
>
> We have a task to move those packages to the babylon org and on the way also make the es6 friendly.

Wow that would be really great deal!

---

<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:** [September 14, 2022, 11:28am UTC](https://forum.babylonjs.com/t/using-recast-js-via-npm-package-import/21225/20 "2022-09-14T11:28:22Z")

</div>

will still be happy to see a reproduction to understand what’s going on in your case

[Next page](https://forum.babylonjs.com/t/using-recast-js-via-npm-package-import/21225.md?page=2)