Using Recast.js via NPM package import

Hi. I’m trying to reproduce this example Babylon.js Playground in my Nuxt (Vue) environment. It works correctly if I include Recast library via <script src=""></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: zen-wildflower-rnlgd - CodeSandbox

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

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

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?

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.

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: zen-wildflower-rnlgd - CodeSandbox

That’s not the right reacst import -

You want this - recastjs - npm

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: competent-violet-q5xp4 - CodeSandbox

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

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 recast.js/getting-started at master · vincent/recast.js · GitHub 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.

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.