How to use RecastJSPlugin in version 5.13

Questions
1

the recast-detour version is 1.5.0

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

let recast = await Recast();
const navigationPlugin = new RecastJSPlugin(recast);

Then send an error:
Uncaught (in promise) TypeError: Cannot set properties of undefined (setting ‘Recast’)

how to use RecastJSPlugin?

2

try to import Recast from ‘recast-detour’ instead import * as Recast from ‘recast-detour’

3

Hello @zz_dz just checking in if you’re still having issues.

4

I met the same problem, when importing ‘recast-detour’ package,

import * as BABYLON from '@babylonjs/core'
import Recast from 'recast-detour

const recast = await Recast
const navigationPlugin = new BABYLON.RecastJSPlugin(recast)

the error is blow:

SyntaxError: The requested module '....XXX' does not provide an export named 'fileURLToPath'

It seems about the ES6 module input error. Accourding to this post, I change the first line of d.ts file. But not work it out.
Can someone show demo using recast-detour via NPM?

5

cc @RaananW and @Cedric

6

Any news on this? I am having the same issue

7

There is an open discussion about improving the recast-detour package here - Recast (recast-detour) working with react-native - #15 by RaananW

9

Thank you for the quick update @RaananW :slight_smile:, creating an ESM-Friendly version of the package should fix the issue in my case i believe (i am using Vite instead of Webpack, which doesn’t transpile modules in development mode)

10

Hi Yannis, by any chance, were you able to make it work with your setup (mine looks quite similar, using Vite through Quasar framework).

I have been stuck for days. I gave up seeking a clean solution waiting for the ESM friendly version of recast-detour, and I was convinced that I could make it work with a “dirty” solution, but I am not able do that neither…

Any help of clue will be really appreciated ! :pray:

11

For anyone stuck using Vite hopefully this will help using the latest version.

Put this in your vite.config.t:

import { defineConfig } from "vite";
import path from "path";

export default defineConfig({
    plugins: [
        {
            name: 'fix-recast',
            transform(code, id) {
              if (id.includes('recast-detour.js')) {
                return code.replace(`this["Recast"]`, 'window["Recast"]');
              }
            }
        }      
    ],
});

Then hard refresh your page (Control + F5)