npm start results in error caused by outdated GraphiQL client in "explorer" app

[LeosPrograms]

This is an error in apps/hrea-graphql-explorer due to non-compliant ESModules being used by the Holochain client libraries. It only affects this example app and does not impact building & packaging of the hREA libraries, or execution of integration tests.

The bug manifests with the following terminal output:

Failed to compile.

Attempted import error: 'js-base64' does not contain a default export (imported as 'b64').
asset static/js/bundle.js 6.83 MiB [emitted] (name: main) 1 related asset
asset index.html 1.63 KiB [emitted]
asset asset-manifest.json 190 bytes [emitted]
orphan modules 648 KiB [orphan] 586 modules
runtime modules 29.6 KiB 15 modules
modules by path ../../node_modules/.pnpm/ 5.23 MiB 887 modules
modules by path ../../modules/vf-graphql-holochain/build/ 159 KiB 56 modules
modules by path ./src/ 24 KiB
  modules by path ./src/*.css 9.56 KiB 4 modules
  modules by path ./src/*.tsx 8.91 KiB 2 modules
  + 1 module
asset modules 1.43 KiB
  data:image/png;base64,iVBORw0KGgoAAAAN.. 295 bytes [built] [code generated]
  data:image/png;base64,iVBORw0KGgoAAAAN.. 324 bytes [built] [code generated]
  data:image/png;base64,iVBORw0KGgoAAAAN.. 296 bytes [built] [code generated]
  + 2 modules
fs (ignored) 15 bytes [built] [code generated]
path (ignored) 15 bytes [built] [code generated]

WARNING in ../../node_modules/.pnpm/fecha@4.1.0/node_modules/fecha/lib/fecha.js
Module Warning (from ../../node_modules/.pnpm/source-map-loader@3.0.2_webpack@5.88.2/node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/leo/hApps/hREA/node_modules/.pnpm/fecha@4.1.0/node_modules/fecha/lib/fecha.js.map' file: Error: ENOENT: no such file or directory, open '/home/leo/hApps/hREA/node_modules/.pnpm/fecha@4.1.0/node_modules/fecha/lib/fecha.js.map'
 @ ../../modules/vf-graphql-holochain/build/connection.js 25:0-38 211:22-27 213:24-29 231:11-17
 @ ../../modules/vf-graphql-holochain/build/index.js 18:0-110 21:0-33:14 21:0-33:14 21:0-33:14 21:0-33:14 21:0-33:14
 @ ./src/App.tsx 11:0-75 158:14-25 159:25-35
 @ ./src/index.tsx 7:0-24 9:50-53

WARNING in ../../node_modules/.pnpm/libsodium@0.7.11/node_modules/libsodium/dist/modules/libsodium.js 3259:26-43
Module not found: Error: Can't resolve 'crypto' in '/home/leo/hApps/hREA/node_modules/.pnpm/libsodium@0.7.11/node_modules/libsodium/dist/modules'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
    - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "crypto": false }
 @ ../../node_modules/.pnpm/libsodium-wrappers@0.7.11/node_modules/libsodium-wrappers/dist/modules/libsodium-wrappers.js
 @ ../../node_modules/.pnpm/@holochain+client@0.16.0/node_modules/@holochain/client/lib/api/zome-call-signing.js 1:0-41 37:8-21 38:17-24 59:8-21 60:17-24
 @ ../../node_modules/.pnpm/@holochain+client@0.16.0/node_modules/@holochain/client/lib/api/index.js 7:0-39 7:0-39
 @ ../../node_modules/.pnpm/@holochain+client@0.16.0/node_modules/@holochain/client/lib/index.js 1:0-31 1:0-31
 @ ../../modules/vf-graphql-holochain/build/connection.js 21:0-75 55:22-44 79:35-55 127:8-28 128:38-58
 @ ../../modules/vf-graphql-holochain/build/index.js 18:0-110 21:0-33:14 21:0-33:14 21:0-33:14 21:0-33:14 21:0-33:14
 @ ./src/App.tsx 11:0-75 158:14-25 159:25-35
 @ ./src/index.tsx 7:0-24 9:50-53

2 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

ERROR in ../../modules/vf-graphql-holochain/build/connection.js 29:4-7
export 'default' (imported as 'b64') was not found in 'js-base64' (possible exports: Base64, VERSION, atob, atobPolyfill, btoa, btoaPolyfill, btou, decode, encode, encodeURI, encodeURL, extendBuiltins, extendString, extendUint8Array, fromBase64, fromUint8Array, isValid, toBase64, toUint8Array, utob, version)
 @ ../../modules/vf-graphql-holochain/build/index.js 18:0-110 21:0-33:14 21:0-33:14 21:0-33:14 21:0-33:14 21:0-33:14
 @ ./src/App.tsx 11:0-75 158:14-25 159:25-35
 @ ./src/index.tsx 7:0-24 9:50-53

webpack 5.88.2 compiled with 1 error and 2 warnings in 13801 ms
No issues found.

[Connoropolous]

@LeosPrograms this is the bug that was related https://github.com/h-REA/hREA/issues/315

I am trying to make sense of what can be done

[Connoropolous]

what version of nodejs are you on?

and, you could try bumping this version of holochain client to one of the most recent, but hopefully that wouldn't create other issues https://github.com/h-REA/hREA/blob/365962e0c89237ed44ec2b4cafe0402b638d1ebd/modules/vf-graphql-holochain/package.json#L44

[pospi]

It does seem strange that you're getting this error. I was able to run an installation on a fresh clone without issues, though I did have to cherry-pick @LeosPrograms' commit to fix the launch command (thanks for that).

Just to be sure we're on the same page, this should reset you:

nix develop
npm run clean
pnpm i
npm start

However, there is also a partially completed upgrade to Holochain 0.2.x in progress on sprout that seemed simpler at first glance than it turned out to be. Apologies for that, I should have put it on a branch and it's overdue that I gave it some attention to fix up the 2 failing tests.

[pospi]

It might also be worth separating out npm start and running the sub-commands, as this will make retesting quicker.

• pnpm run build need only be called once, or after changes to Rust code.
• You don't really need to have live compilation of the modules/ either. You can run npm run build:graphql:adapter && npm run build:graphql:client once, or after changes to that code.
• To actually execute the dev environment, you can run these two commands in separate terminals:
  • npm run dev:graphql:explorer
  • npm run dht
• To run tests, you should use npm run test:integration since the unit tests are very limited and take a long time to compile.

[pospi]

@LeosPrograms I see what's wrong. It's actually a bug in the TypeScript build configuration of the GraphiQL explorer. So the libraries compile fine but npm run dev:graphql:explorer fails, mostly because GraphiQL is an outdated bit of kit that depends on a lot of older versions of things.

I don't know that it's necessarily worth fixing this at the moment given that we could spend a lot of time upgrading GraphiQL & its underlying React / Webpack config; or even swap it out for a more modern client app. I'll update the issue title and leave this open, in any case.

For now if it's possible to do your testing as integration test scripts then I think that's the best way of proceeding. Have a look at the 'test' script in test/package.json, copy that command, remove the quote escaping and add an npx before tape, and run it from the test/ directory. If you take the piping to tap-dot off the end you will see all the output, and you can change the glob expression from **/*.js to target individual test files rather than running the entire suite. Hope that is an ergonomic-enough way of working for now! :slightly_smiling_face:

It should look something like this:

TRYORAMA_LOG_LEVEL=debug WASM_LOG=debug RUST_LOG="debug,wasmer_compiler_cranelift=error,holochain::core::workflow=error,holochain::conductor::entry_def_store=error" RUST_BACKTRACE=1 GRAPHQL_DEBUG=1 npx tape some/test-file.js

[pospi]

Note above^ the CI process will no longer build the explorer *.webhapp file until this issue is resolved.