Hi,
I’m trying to get recast working with react-native. I get the following error.
error: Error: Unable to resolve module path from /Users/user1/project/native/src/recast.js: path could not be found within the project or in these directories:
9 | var Module=typeof Recast!==“undefined”?Recast:{};
I’ve tried using the recast-detour package.
I followed the instructions on this post
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();
and this post
Currently there is some problem with the d.ts typings, as I get the following error:
'C:/projects/babylonjs-typescript-nullengine-example/node_modules/recast-detour/recast.d.ts' is not a module.
I created a small repo to illustrate this problem:
If you would be so kind to clone this and run the following commands, you should be able to see the error above:
npm install
npm run build
Rant warning: My use case for this is to use modern web technologies to build a multiplayer game. I am tryin…
with no luck.
It’s working fine on babylon web using the preview script -
but now I need to use it with babylon react native.
Is anyone using recast with react-native?
Cedric
October 4, 2022, 8:19am
3
I’m not an expert with packages @ryantrem or @RaananW can help here. I’m also curious to see how this can work.
You can install recast-detour as recast in your package.json like this:
Or, just copy and paste the recast bundle into your apps folder
We’ll need to release both a UMD and ESM version of the package. Let’s find time to discuss this and add module support. It should resolve most of those issues.
2 Likes
ESM version would be nice so I don’t have to manually hack the file anymore
1 Like
I found the problem.
The path & fs packages were missing. I fixed by adding “fs”: “npm:react-native-fs” & “path”: “npm:react-native-path” to package.json
I have a new error message
WARN no native wasm support detected
My code:
import Recast from “recast-detour”;
await Recast();
Any ideas?
I have a lot of background with Babylon React Native, but I don’t know what recast is so a bit hard to comment. For sure WebAssembly does not exist in React Native… do you know what is referencing it? Is it something in your code, in Babylon, or in recast?
recast-detour uses webassembly.
I’m looking into using GitHub - crowdedjs/recast-detour instead.
There is also an asm version in the babylon native repo. Idk if its any different than the other one on github, emscripten isnt so consistent across versions on what and how it renames and exports. Anyway, its here
// This is recast.js, a port of Recast/detour to JavaScript.
var Recast = (function() {
var _scriptDir = typeof document !== 'undefined' && document.currentScript ? document.currentScript.src : undefined;
return (
function(Recast) {
Recast = Recast || {};
var Module=typeof Recast!=="undefined"?Recast:{};var moduleOverrides={};var key;for(key in Module){if(Module.hasOwnProperty(key)){moduleOverrides[key]=Module[key]}}var arguments_=[];var thisProgram="./this.program";var quit_=function(status,toThrow){throw toThrow};var ENVIRONMENT_IS_WEB=false;var ENVIRONMENT_IS_WORKER=false;var ENVIRONMENT_IS_NODE=false;var ENVIRONMENT_HAS_NODE=false;var ENVIRONMENT_IS_SHELL=false;ENVIRONMENT_IS_WEB=typeof window==="object";ENVIRONMENT_IS_WORKER=typeof importScripts==="function";ENVIRONMENT_HAS_NODE=typeof process==="object"&&typeof process.versions==="object"&&typeof process.versions.node==="string";ENVIRONMENT_IS_NODE=ENVIRONMENT_HAS_NODE&&!ENVIRONMENT_IS_WEB&&!ENVIRONMENT_IS_WORKER;ENVIRONMENT_IS_SHELL=!ENVIRONMENT_IS_WEB&&!ENVIRONMENT_IS_NODE&&!ENVIRONMENT_IS_WORKER;var scriptDirectory="";function locateFile(path){if(Module["locateFile"]){return Module["locateFile"](path,scriptDirectory)}return scriptDirectory+path}var read_,readAsync,readBinary,setWindowTitle;if(ENVIRONMENT_IS_NODE){scriptDirectory=__dirname+"/";var nodeFS;var nodePath;read_=function shell_read(filename,binary){var ret;ret=tryParseAsDataURI(filename);if(!ret){if(!nodeFS)nodeFS=require("fs");if(!nodePath)nodePath=require("path");filename=nodePath["normalize"](filename);ret=nodeFS["readFileSync"](filename)}return binary?ret:ret.toString()};readBinary=function readBinary(filename){var ret=read_(filename,true);if(!ret.buffer){ret=new Uint8Array(ret)}assert(ret.buffer);return ret};if(process["argv"].length>1){thisProgram=process["argv"][1].replace(/\\/g,"/")}arguments_=process["argv"].slice(2);process["on"]("uncaughtException",function(ex){if(!(ex instanceof ExitStatus)){throw ex}});process["on"]("unhandledRejection",abort);quit_=function(status){process["exit"](status)};Module["inspect"]=function(){return"[Emscripten Module object]"}}else if(ENVIRONMENT_IS_SHELL){if(typeof read!="undefined"){read_=function shell_read(f){var data=tryParseAsDataURI(f);if(data){return intArrayToString(data)}return read(f)}}readBinary=function readBinary(f){var data;data=tryParseAsDataURI(f);if(data){return data}if(typeof readbuffer==="function"){return new Uint8Array(readbuffer(f))}data=read(f,"binary");assert(typeof data==="object");return data};if(typeof scriptArgs!="undefined"){arguments_=scriptArgs}else if(typeof arguments!="undefined"){arguments_=arguments}if(typeof quit==="function"){quit_=function(status){quit(status)}}if(typeof print!=="undefined"){if(typeof console==="undefined")console={};console.log=print;console.warn=console.error=typeof printErr!=="undefined"?printErr:print}}else if(ENVIRONMENT_IS_WEB||ENVIRONMENT_IS_WORKER){if(ENVIRONMENT_IS_WORKER){scriptDirectory=self.location.href}else if(document.currentScript){scriptDirectory=document.currentScript.src}if(_scriptDir){scriptDirectory=_scriptDir}if(scriptDirectory.indexOf("blob:")!==0){scriptDirectory=scriptDirectory.substr(0,scriptDirectory.lastIndexOf("/")+1)}else{scriptDirectory=""}read_=function shell_read(url){try{var xhr=new XMLHttpRequest;xhr.open("GET",url,false);xhr.send(null);return xhr.responseText}catch(err){var data=tryParseAsDataURI(url);if(data){return intArrayToString(data)}throw err}};if(ENVIRONMENT_IS_WORKER){readBinary=function readBinary(url){try{var xhr=new XMLHttpRequest;xhr.open("GET",url,false);xhr.responseType="arraybuffer";xhr.send(null);return new Uint8Array(xhr.response)}catch(err){var data=tryParseAsDataURI(url);if(data){return data}throw err}}}readAsync=function readAsync(url,onload,onerror){var xhr=new XMLHttpRequest;xhr.open("GET",url,true);xhr.responseType="arraybuffer";xhr.onload=function xhr_onload(){if(xhr.status==200||xhr.status==0&&xhr.response){onload(xhr.response);return}var data=tryParseAsDataURI(url);if(data){onload(data.buffer);return}onerror()};xhr.onerror=onerror;xhr.send(null)};setWindowTitle=function(title){document.title=title}}else{}var out=Module["print"]||console.log.bind(console);var err=Module["printErr"]||console.warn.bind(console);for(key in moduleOverrides){if(moduleOverrides.hasOwnProperty(key)){Module[key]=moduleOverrides[key]}}moduleOverrides=null;if(Module["arguments"])arguments_=Module["arguments"];if(Module["thisProgram"])thisProgram=Module["thisProgram"];if(Module["quit"])quit_=Module["quit"];var STACK_ALIGN=16;function dynamicAlloc(size){var ret=HEAP32[DYNAMICTOP_PTR>>2];var end=ret+size+15&-16;if(end>_emscripten_get_heap_size()){abort()}HEAP32[DYNAMICTOP_PTR>>2]=end;return ret}function getNativeTypeSize(type){switch(type){case"i1":case"i8":return 1;case"i16":return 2;case"i32":return 4;case"i64":return 8;case"float":return 4;case"double":return 8;default:{if(type[type.length-1]==="*"){return 4}else if(type[0]==="i"){var bits=parseInshow original
I tried that one. That gave me the following error.
WARN Possible Unhandled Promise Rejection (id: 0):
I managed to get the asm recast.js working on react native.
Need to remove all references of document and ENVIRONMENT_IS_WEB = true;
Also comment out any require lines under ENVIRONMENT_IS_NODE code.
1 Like
It might be worth doing a pr with those changes, either replacing the current one or side by side named recast.react-native.js ? Seems like figuring this out is non trivial. Maybe @RaananW is an authority to decide if so?
I don’t want to make changes before @Cedric and I had a chance to discuss the next steps, but I don’t see why we can’t improve the experience, if a lot of the users have issues with it.
i’ll summarize the next steps I see:
Make sure we have a dependency-free UMD package (i.e. no fs and no path).
Make the UMD package the “main” library of the recast package
Create an ESM-Friendly version of the package
Make the esm package the “module” reference in package.json
Release the ASM version in the package as a separated package (UMD at first, but I don’t see why not do an ESM-ASM version as well). This should include the changes referenced just 2 posts ago.
Update the README with the instructions on how to use it in all scenarios
Did I forget anything?
1 Like
Also if you could check that types work would be great 