Recast (recast-detour) working with react-native


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:
7 | Recast = Recast || {};
8 |

9 | var Module=typeof Recast!==“undefined”?Recast:{};

I’ve tried using the recast-detour package.

I followed the instructions on this post

and this post

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?

cc @Cedric

I’m not an expert with packages :frowning:
Maybe @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.

1 Like

ESM version would be nice so I don’t have to manually hack the file anymore :smirk: Also if you could check that types work would be great :pray:

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
WARN Possible Unhandled Promise Rejection (id: 0):
ReferenceError: Can’t find variable: WebAssembly

My code:

import Recast from “recast-detour”;

await Recast();
const navigationPlugin: RecastJSPlugin = new RecastJSPlugin(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

I tried that one. That gave me the following error.

WARN Possible Unhandled Promise Rejection (id: 0):
ReferenceError: Can’t find variable: document

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:

  1. Make sure we have a dependency-free UMD package (i.e. no fs and no path).
  2. Make the UMD package the “main” library of the recast package
  3. Create an ESM-Friendly version of the package
  4. Make the esm package the “module” reference in package.json
  5. 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.
  6. Update the README with the instructions on how to use it in all scenarios

Did I forget anything?

1 Like