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)

2 Likes
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)

5 Likes