# RecastJSPlugin, Typescript, ES6

**URL:** <https://forum.babylonjs.com/t/recastjsplugin-typescript-es6/21400>\
**Category:** Tutorials and tips\
**Tags:** documentation, tutorial\
**Created:** [June 4, 2021, 6:02am UTC](https://forum.babylonjs.com/t/recastjsplugin-typescript-es6/21400 "2021-06-04T06:02:41Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [June 4, 2021, 6:02am UTC](https://forum.babylonjs.com/t/recastjsplugin-typescript-es6/21400/1 "2021-06-04T06:02:41Z")

</div>

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 plugin this way: `const navigationPlugin = new RecastJSPlugin(Recast) `

OR JUST

`const Recast = require('recast-detour')`, but the linter will complain, that you need to change it to an ES6 import. Hopefully you all know how to silence it 😃 However I prefer not to mix imports and requires, so the industry does, therefore I highly encourage you to use the first longer but much cleaner method.

Enjoy!

EDIT:  
[https://github.com/Microsoft/TypeScript/issues/13774](https://github.com/Microsoft/TypeScript/issues/13774)

R.

---

<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:** [June 4, 2021, 10:28am UTC](https://forum.babylonjs.com/t/recastjsplugin-typescript-es6/21400/2 "2021-06-04T10:28:34Z")

</div>

awesome, thanks for sharing

---

<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:** [June 4, 2021, 5:42pm UTC](https://forum.babylonjs.com/t/recastjsplugin-typescript-es6/21400/3 "2021-06-04T17:42:30Z")

</div>

Ping @Cedric FYI

---

<div class="post-metadata">

**Author:** ![hvnsNight](https://avatars.discourse-cdn.com/v4/letter/h/a698b9/32.png) [@hvnsNight](https://forum.babylonjs.com/u/hvnsNight)\
**Post date:** [February 19, 2022, 10:10am UTC](https://forum.babylonjs.com/t/recastjsplugin-typescript-es6/21400/4 "2022-02-19T10:10:05Z")

</div>

Sorry to revive this post but is this solution still valid today? I’m trying this on my typescript environment and I get the infamous ‘Module not found: Error: Can’t resolve ‘fs’ in ‘…\node\_modules\recast-detour’’’. error

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [February 19, 2022, 10:20am UTC](https://forum.babylonjs.com/t/recastjsplugin-typescript-es6/21400/5 "2022-02-19T10:20:18Z")

</div>

> [@hvnsNight](#):
>
> Sorry to revive

No worries. Show us your `package.json` and your imports.

---

<div class="post-metadata">

**Author:** ![hvnsNight](https://avatars.discourse-cdn.com/v4/letter/h/a698b9/32.png) [@hvnsNight](https://forum.babylonjs.com/u/hvnsNight)\
**Post date:** [February 19, 2022, 10:29am UTC](https://forum.babylonjs.com/t/recastjsplugin-typescript-es6/21400/6 "2022-02-19T10:29:12Z")

</div>

thanks for the help, this is my package.json:

```auto
{
  "name": "testapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babylonjs/core": "^4.2.0",
    "@babylonjs/gui": "^4.2.0",
    "@babylonjs/inspector": "^4.2.0",
    "@babylonjs/loaders": "^4.2.0",
    "@chakra-ui/icon": "^2.0.0",
    "@chakra-ui/icons": "^1.1.1",
    "@chakra-ui/react": "^1.7.3",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.0.3",
    "@types/node": "^16.11.14",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "framer-motion": "^5.5.5",
    "fs": "^0.0.1-security",
    "path": "^0.12.7",
    "react": "^17.0.2",
    "react-babylonjs": "^3.0.31",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "react-scripts": "5.0.0",
    "recast-detour": "^1.5.0",
    "typescript": "^4.5.4",
    "web-vitals": "^2.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

```

And my imports are:

```auto
import { Mesh, MeshBuilder, Nullable, SceneLoader, Tools, Vector3 } from "@babylonjs/core";
import { useState } from "react";
import { Scene } from "react-babylonjs";

import { RecastJSPlugin } from '@babylonjs/core'
import Recast from 'recast-detour'

```

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [February 19, 2022, 1:07pm UTC](https://forum.babylonjs.com/t/recastjsplugin-typescript-es6/21400/7 "2022-02-19T13:07:14Z")

</div>

NGL, this is a though one to crack with BJS 4.2 (depending on which version of webpack you are using) however there is a solution, I am getting closer 😃 Are you willing to upgrade to BJS 5? It will make this easier.

---

<div class="post-metadata">

**Author:** ![hvnsNight](https://avatars.discourse-cdn.com/v4/letter/h/a698b9/32.png) [@hvnsNight](https://forum.babylonjs.com/u/hvnsNight)\
**Post date:** [February 19, 2022, 10:39pm UTC](https://forum.babylonjs.com/t/recastjsplugin-typescript-es6/21400/8 "2022-02-19T22:39:06Z")

</div>

Thanks! if the only way to get this plugin working is to use babylon 5, I’d love to know the solution for sure, but ideally it would be best for me to keep babylon 4.2 ☹. I’m currently using [react-babylonjs](https://github.com/brianzinn/react-babylonjs) which I believe doesn’t support babylon 5 at the moment 😥

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [February 19, 2022, 10:47pm UTC](https://forum.babylonjs.com/t/recastjsplugin-typescript-es6/21400/9 "2022-02-19T22:47:31Z")

</div>

Ok, no worries. It will work for sure. I’ve used the plugin with 4.2.1 as well, but migrated to 5 a few months ago. I need to know your exact bundler environment. Webpack? Version?

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [February 19, 2022, 11:00pm UTC](https://forum.babylonjs.com/t/recastjsplugin-typescript-es6/21400/10 "2022-02-19T23:00:37Z")

</div>

I went through this process 3 times already but I don’t remember the exact steps 😂 it’s so ducking fragile! First time when I switched to bjs 5 and two times I had to adjust it to work with the new beta releases. Ain’t gonna touch it again lol

However you might be interested in a pure js solution based on Yuka ai js library. I wrote 3 navigation examples. You can find them here:

> [@Yuka Game AI + Babylon.js Examples - the 1st Release](https://forum.babylonjs.com/t/yuka-game-ai-babylon-js-examples-the-1st-release/27690):
>
> Dear friends, Our small team (@labris and @roland) is very glad to present the 1st release of “Yuka Game AI + Babylon.js Examples”. One may say that this is all what you need for a web-based 3D game. Link: [Yuka | Examples with Babylon.js](https://yuka.babylonpress.org/examples/) Here is just a very short list of [Yuka.js](https://mugen87.github.io/yuka/) features: 3D Game Entity and Game Entity Manager Finite State Machine Entity Brain with Goal Evaluator Navigation Mesh and Graph Algorithms Perception: Line of Sight and Memory System 3D Steering Behaviors Save/Load…

You’ll be interested in the TS version. There is only 1 navigation example at the moment in TS but definitely check the other two JS examples as well. It’s as easy as import the YUKA package and you are good to go.

EDIT:  
I just got it working in 4.2.1 like this (not the cleanest solution though):

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/6/067505f115923c947aaba702afae060839985559.png)

Unzip this file to your `src` folder:  
[recast.zip](https://forum.babylonjs.com/uploads/short-url/8WazDASJALMMOoxHS8a1TUZsBCc.zip) (201.5 KB)

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/2/d2297aaaac790433b0722ae4632c4338a57d3a2a.png)

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/1/9127d47636e51dcc0c0c98ca4414014ac3fbe2ef.png)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/c/0c466f06059ee3953686775ec1be18b69ea5e338.png)

or it works with the `recast-detour` npm package as well:  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/c/5cbd17bed75a706b6d1e4c479b407e7d419d52a0.png)

Modify the the file `recast-detour/recast.d.ts` in `node_modules`:  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/1/11c9d7c330d657ea9b9280a8ceeb6e3764dc4474.png)

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/2/c24200096fb626122c2de75139724c4e62c3cd47.png)

The result is the same:

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

🖖

---

<div class="post-metadata">

**Author:** ![hvnsNight](https://avatars.discourse-cdn.com/v4/letter/h/a698b9/32.png) [@hvnsNight](https://forum.babylonjs.com/u/hvnsNight)\
**Post date:** [February 20, 2022, 12:56am UTC](https://forum.babylonjs.com/t/recastjsplugin-typescript-es6/21400/11 "2022-02-20T00:56:57Z")

</div>

thanks for those instruction, I’ve updated my project to run babylon 4.2.1 and tried the instructions but I still get the 'Module not found: Error: Can’t resolve ‘fs’ in ‘…\node\_modules\recast-detour’ error. Can you confirm the way you import recast? my imports currently look like this:

```auto
import { RecastJSPlugin } from '@babylonjs/core'
import * as Recast from 'recast-detour'

```

My webpack version is 5.65.0.

I might have to switch gears and try your library, looks awesome!

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [February 20, 2022, 6:11am UTC](https://forum.babylonjs.com/t/recastjsplugin-typescript-es6/21400/12 "2022-02-20T06:11:33Z")

</div>

I am on phone so just shortly: Did you try the first solution as well? The way I import Recast is on the screenshot.

---

<div class="post-metadata">

**Author:** ![hvnsNight](https://avatars.discourse-cdn.com/v4/letter/h/a698b9/32.png) [@hvnsNight](https://forum.babylonjs.com/u/hvnsNight)\
**Post date:** [February 20, 2022, 9:03am UTC](https://forum.babylonjs.com/t/recastjsplugin-typescript-es6/21400/13 "2022-02-20T09:03:30Z")

</div>

yep, I’ve tried both ways with the same result ☹

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [February 20, 2022, 9:10am UTC](https://forum.babylonjs.com/t/recastjsplugin-typescript-es6/21400/14 "2022-02-20T09:10:10Z")

</div>

Can you send me an empty project set up exactly the way as yours is?

Edit: or you can share your actual project with me

---

<div class="post-metadata">

**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\
**Post date:** [February 20, 2022, 4:29pm UTC](https://forum.babylonjs.com/t/recastjsplugin-typescript-es6/21400/15 "2022-02-20T16:29:45Z")

</div>

> [@hvnsNight](#):
>
> I’m currently using [react-babylonjs](https://github.com/brianzinn/react-babylonjs) which I believe doesn’t support babylon 5 at the moment

BabylonJS is a peer dep - if it doesn’t work on v5 create an issue on that repo. I did a backwards compat PR on 5 alpha, but not tested lately. Thanks.

edit: just tested on `5.0.0-beta.9` and no issues found.

---

<div class="post-metadata">

**Author:** ![hvnsNight](https://avatars.discourse-cdn.com/v4/letter/h/a698b9/32.png) [@hvnsNight](https://forum.babylonjs.com/u/hvnsNight)\
**Post date:** [February 21, 2022, 5:25am UTC](https://forum.babylonjs.com/t/recastjsplugin-typescript-es6/21400/16 "2022-02-21T05:25:23Z")

</div>

Thank you @brianzinn, I actually blindly assumed there was no support, I actually haven’t tested on 5.0. If I find any issues i will gladly let you know.

@roland working on packing my files, thanks for your patience.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [February 21, 2022, 6:25am UTC](https://forum.babylonjs.com/t/recastjsplugin-typescript-es6/21400/17 "2022-02-21T06:25:23Z")

</div>

> [@hvnsNight](#):
>
> working on packing my files, thanks for your patience.

Sure 👍

---

<div class="post-metadata">

**Author:** ![hvnsNight](https://avatars.discourse-cdn.com/v4/letter/h/a698b9/32.png) [@hvnsNight](https://forum.babylonjs.com/u/hvnsNight)\
**Post date:** [February 21, 2022, 10:36am UTC](https://forum.babylonjs.com/t/recastjsplugin-typescript-es6/21400/18 "2022-02-21T10:36:16Z")

</div>

[react-babylonjs-recast\_ErrorProject.zip](https://forum.babylonjs.com/uploads/short-url/gwopiJlEhGy04PPzQIHM1aanVkv.zip) (507.5 KB)  
This is the minimal project with recast imported on my environment. Hope it’s helpful.

---

<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:** [February 21, 2022, 10:58am UTC](https://forum.babylonjs.com/t/recastjsplugin-typescript-es6/21400/19 "2022-02-21T10:58:06Z")

</div>

The problem is webpack. Webpack 4 and below included shims for node built in packages, but webpack 5 removed them. Im not sure why recast requires fs because i thought that was done through emscripten which provides its own fs implementation .

Anyway, to restore webpack 4 behavior require this in your webpack config

const NodePolyfillPlugin = require(“node-polyfill-webpack-plugin”) and add the plugin to the plugins array.

If youre using only react scripts, i advise using craco to override the default config

---

<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:** [February 21, 2022, 11:07am UTC](https://forum.babylonjs.com/t/recastjsplugin-typescript-es6/21400/20 "2022-02-21T11:07:01Z")

</div>

Oh you can also just downgrade react scripts to v4 but it’ll stop working in node 17 because of the openssl upgrade and webpack generally being ass

[Next page](https://forum.babylonjs.com/t/recastjsplugin-typescript-es6/21400.md?page=2)