React wasm example not compiling

[futurechimp]

I spent a bit of time tonight to fix up some JavaScript security vulnerabilities (they're only in example code, not our real code, but it's nice to keep things up to date). That's in #393.

I had a look at the React example to see if it was still running, but it doesn't work. It gives this message after npm install && npm start run:

Failed to compile

./node_modules/@nymproject/nym-client-wasm/nym_client_wasm.js
Module not found: Can't resolve './nym_client_wasm_bg.js' in '~/nym/nym/clients/webassembly/react-example/node_modules/@nymproject/nym-client-wasm'

This error occurred during the build time and cannot be dismissed.

What's strange about it is that the overall package is in fact there, it's just got that one file missing.

@jstuczyn I think you said you had tried this out and that it was working - does it work for you on current develop? I've gone back to some previous versions, results as follows:

• after my security fix - error as above
• v0.8.1 tag - error as above
• v0.8.0 tag - the example is disabled, with a message saying "wait for 0.8.1"

[futurechimp]

No need to try to fix it yet, just wondering if it worked for you :).

[jstuczyn]

Tried it just now (using develop), still working for me : )

[futurechimp]

Strange. Is the file nym_client_wasm_bg.js there in your node modules at the path indicated?

If not, maybe we can narrow down the problem to whatever is trying to load it in my machine but not load it on your machine (eg probably a software version difference).

[jstuczyn]

So I've tested it in both windows and linux (WSL2) environments with the following:
Windows:

  'react-example': '0.1.0',
  npm: '5.6.0',
  ares: '1.15.0',
  brotli: '1.0.7',
  cldr: '35.1',
  http_parser: '2.8.0',
  icu: '64.2',
  llhttp: '1.1.4',
  modules: '72',
  napi: '5',
  nghttp2: '1.39.2',
  node: '12.13.0',
  openssl: '1.1.1d',
  tz: '2019a',
  unicode: '12.1',
  uv: '1.32.0',
  v8: '7.7.299.13-node.12',
  zlib: '1.2.11'
}

Linux:

{
  'react-example': '0.1.0',
  npm: '6.14.4',
  ares: '1.16.0',
  brotli: '1.0.7',
  cldr: '36.1',
  icu: '66.1',
  llhttp: '2.0.4',
  modules: '83',
  napi: '6',
  nghttp2: '1.40.0',
  node: '14.0.0',
  openssl: '1.1.1f',
  tz: '2019c',
  unicode: '13.0',
  uv: '1.37.0',
  v8: '8.1.307.30-node.30',
  zlib: '1.2.11'
}

and then with

{
  'react-example': '0.1.0',
  npm: '6.12.0',
  ares: '1.15.0',
  brotli: '1.0.7',
  cldr: '35.1',
  http_parser: '2.8.0',
  icu: '64.2',
  llhttp: '1.1.4',
  modules: '72',
  napi: '5',
  nghttp2: '1.39.2',
  node: '12.13.0',
  openssl: '1.1.1d',
  tz: '2019a',
  unicode: '12.1',
  uv: '1.32.0',
  v8: '7.7.299.13-node.12',
  zlib: '1.2.11'
}

The windows run had no issues, both linux runs failed with the same error described above.

[jstuczyn]

Downgrading npm on linux to the same version that's on windows did not fix issue either.

[ethanfrey]

I was trying out the webassembly examples, js worked great, but react not so. I figured I'd add my experience to the issue. Maybe it helps. (I am testing on tags/v0.8.1):

System:

• Ubuntu 18.04
• node v12.19.0
• yarn 1.22.10

npm i && npm run start => same issue as original post (Can't resolve './nym_client_wasm_bg.js')

yarn && yarn start => Gives a webpack dependency issue, but when I patch that I get the same error as above.

---

ls XXX/clients/webassembly/react-example/node_modules/@nymproject/nym-client-wasm:

LICENSE_APACHE           nym_client_wasm.d.ts  package.json
nym_client_wasm_bg.wasm  nym_client_wasm.js    README.md

ls XXXX/clients/webassembly/js-example/node_modules/@nymproject/nym-client-wasm:

LICENSE_APACHE           nym_client_wasm_bg.wasm  package.json
nym_client_wasm_bg.d.ts  nym_client_wasm.d.ts     README.md
nym_client_wasm_bg.js    nym_client_wasm.js

Where do these come from? It turns out package.json is different.

react-example: "@nymproject/nym-client-wasm": "^0.8.0"

js-example: "@nymproject/nym-client-wasm": "file:../pkg" (which I had just compiled locally)

And looking at XXX/webassembly/pkg/package.json, I see:

{
  "files": [
    "nym_client_wasm_bg.wasm",
    "nym_client_wasm.js",
    "nym_client_wasm.d.ts",
    "LICENSE_APACHE"
  ]
}

These files were never properly published to npm.

[ethanfrey]

This is an issue with wasm-pack. They have a fix on master, but have not published a release with it. See orignal issue and follow up.

The two work-arounds from the original issue, were git clone git@github.com:rustwasm/wasm-pack.git and running the the most recent commit. Or just manually editing the package.json file between generating it and publishing.

I would be happy for an updated npm package supporting 0.8.1 so I can experiment with it a bit more.

[futurechimp]

Hey, thanks for the research here @ethanfrey, we were wondering what was going on.

@jstuczyn I can see that you've done quite a bit of work in the webassembly client to get it ready for 0.9.x - is there a natural place I can grab a 0.8.1 to publish with the files included? It seems like the hotifx/0.8.1 could be a good candidate?

[futurechimp]

I've published a new 0.8.1 wasm client package to NPM. It seems to do the trick.

@ethanfrey we will include the fixes for this in the next release, but for the moment if you want to try things out, you can do:

git checkout v0.8.1
cd clients/webassembly/react-example
<upgrade wasm client     "@nymproject/nym-client-wasm": "^0.8.1">
npm install && npm run start

For me, that works as a temporary fix so that the React example runs.

[ethanfrey]

Nice one. Thank you. Yeah, happy to edit a line or two on those js apps. I was playing with them anyway to learn