Error when running react-scripts build with iden3 packages that include ffjavascript as dependency

[Ian-Bright]

When running react-scripts build in a React app the following error will occur in @iden3/binfileutils as well as circom_runtime:

node_modules/@iden3/binfileutils/node_modules/ffjavascript/src/engine_fft.js: Couldn't find a Program

[phated]

Snarkjs/ffjavascript doesn't support react scripts or create-react-app (yet).

[jp4g]

Snarkjs/ffjavascript doesn't support react scripts or create-react-app (yet).

@phated We are interested in submitting prs updating snarkjs/ffjavascript/circomlibjs codebase so that anyone familiar with create-react-app dApp stacks can buidl with circom. Any information on what we need to consider would be super helpful (hopefully for Circom as well). We understand there are issues with Polyfilling/ module shimming in Webpack 5, but on React 16 / Webpack 4 we are still running into this "Couldn't find a Program" message.

It may just take more time dumped into it, but the internet has not yielded any helpful info on the issue. Any direction you can point us in is a better one than we are facing right now. This is a continuation of iden3/circomlibjs issue #3 and while we now have our dev (react-scripts start) environment working, we are adamant that the circom sdk is easy to integrate as an eth dev and if we can push an update to these packages on npm we can fluently make the argument.

[phated]

@jp4g I'm working on this. Like you mentioned, the issue is that we need to have good support for not only webpack 4 but also webpack 5 and it is really hard to do both. We also want to make sure we support new tools like esbuild and vite.

Now that I shipped my big feature for Dark Forest, I'm spending a lot more time working on this stuff.

[jp4g]

Okay... is there any way to assist? Documentation even?

I get if you feel there would be too many cooks in the kitchen. If we wanted a production app deployed today, what steps could we take? Dark Forest seems to be getting by just fine using React 16 and webpack 4. This is our package.json now, I've tried downgrading React to the same version as dark forest with no luck. We will probably try emulating the package structure used in Dark Forest's client next while we wait for Webpack 5 compatibility

Also what feature did you ship for dark forest?? been a while since I've played, been more focused on building zk. but it was a first stop 4 months ago 😄

[phated]

Seems you are looking at an old version of darkforest. For now, you should just import snarkjs with a normal script tag, like here: https://github.com/darkforest-eth/client/blob/master/index.html#L70

We'll get it working as an import-able, webpack-able dependency soonish.

[jp4g]

@phated We got snarkjs.min.js working pretty quickly, but circomlibjs did not have an minified IIFE/ browser compatible rollup build- hence the delay in response. I have created a PR in circomlibjs to add a similar IIFE bundler to the circomlibjs repository that SnarkJS has, with some differences according to what I needed to use to successfully get this working.

It is in the RFC stage for sure but once iden3 maintainers are satisfied of its integrity, would really love to push this fix into the NPM registry so I can show people how to quickly get circomlibjs put in their React builds. Please make any criticisms you deem necessary and I will address them!

[jdubpark]

@jp4g Any update on this? I'm trying to use Semaphore on React (tsx) which requires a browser-compatible circomlibjs

[OBrezhniev]

@Ian-Bright @jp4g @jdubpark please check the latest releases of ffjavascript & snarkjs with new ESM build for browsers, which should play nicely with React & Angular.