Support parceljs

[jeluard]

Bug Report

An error is thrown while using capi with https://parceljs.org/

Current Behavior

The following error is thrown while running parcel serve:

index.0641b553.js:61 Uncaught Error: Cannot find module 'fs'
    at newRequire (index.0641b553.js:61:19)
    at newRequire (index.0641b553.js:45:18)
    at localRequire (index.0641b553.js:84:35)
    at aonHG.85cf385a6852c05f (Deno.node.ts:2:1)
    at newRequire (index.0641b553.js:71:24)
    at localRequire (index.0641b553.js:84:35)
    at bTY6v../deps/shims/Deno.node.js (_dnt.shims.ts:1:1)
    at newRequire (index.0641b553.js:71:24)
    at localRequire (index.0641b553.js:84:35)
    at dcuQD../_dnt.polyfills.js (mod.ts:3:1)

Expected Behavior

It doesn't throw an error

Steps To Reproduce

See following repo https://github.com/jeluard/test-capi

Environment

• Node: ... (node -v)
• Browser: Chrome
• OS: OSX
• Language: JavaScript

[harrysolovay]

Very interesting. I was able to get a prod build parcel build src/index.html working.

Getting there needed a few tweaks to your repro:

• create a nets.js (in your case, since you haven't configured TS) and export a net spec corresponding to the import in your src/app.js file.

import { net } from "capi/nets"

export const polkadot = net.ws({
  url: "wss://rpc.polkadot.io/",
})

• add to your package.json scripts.

// ...
"scripts": {
  "clean": "rm -rf node_modules dist .parcel-cache",
  "dev": "yarn parcel src/index.html",
  "dev2": "vite src/",
+ "sync": "capi sync node"
}
// ...

• Set the package.json type field to "module"
• yarn sync && yarn

---

This is where things break down: Parcel's dev server applies some transformations (might be attempting to inline functions that would––if evaluated––import and call to node:fs). These code paths should never be evaluated.

I attempted the following:

• explicit hash specifiers for Node
• disabling the fs shim
• disabling various inlining transformations

... unfortunately, was still seeing that error from the dev-served site.

We'll keep digging into this, but thought I'd share current findings incase you have any ideas what might be going wrong for dev builds (as I said before, prod builds are behaving correctly). My guess is the solution lays in identifying the offending Parcel dev server optimization and disabling it.

[jeluard]

Thanks for digging !

[ryanleecode]

I was able to hack it by writing a custom transformer that removes the fs import.

diff --git a/.parcelrc b/.parcelrc
new file mode 100644
index 0000000..a8de3bc
--- /dev/null
+++ b/.parcelrc
@@ -0,0 +1,9 @@
+{
+  "extends": "@parcel/config-default",
+  "transformers": {
+    "node_modules/**/Deno.node.js": [
+      "parcel-transformer-capi",
+      "@parcel/transformer-js"
+    ]
+  }
+}
diff --git a/package.json b/package.json
index 3a28697..885ce57 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,11 @@
   "type": "module",
   "packageManager": "yarn@1.22.19",
   "devDependencies": {
+    "@parcel/config-default": "^2.9.3",
+    "@parcel/resolver-default": "^2.9.3",
+    "@parcel/transformer-js": "^2.9.3",
     "parcel": "2.9.3",
+    "parcel-transformer-capi": "^0.0.1",
     "process": "0.11.10"
   },
   "dependencies": {

[ryanleecode]

source for the plugin can be found here

https://github.com/ryanleecode/parcel-transformer-capi/blob/master/index.js

[ryanleecode]

I've moved the repo to https://github.com/paritytech/parcel-transformer-capi and setup npm publish automation under the paritytech-ci account. I've deleted the package that I published on my personal npm account and we will now need to wait 24 hours before it can be republished.

https://github.com/paritytech/npm_publish_automation/actions/runs/5469011834/jobs/9957398886

In the meantime, please use npm pack manually on the plugin and link it in your package.json as a tarball.

[jeluard]

Thanks @ryanleecode for jumping on top of this! I don't need parceljs support explicitly right now, but great to keep in mind!

Still not quite clear to me if there's something to be addressed at parceljs level, but at least we know there is a workaround!

[ryanleecode]

Seemingly parcel can import from capi but it can't import any of its patterns

@parcel/core: Failed to resolve 'capi/patterns/compat/pjs_sender' from './src/main.ts'

  /home/ryan/Documents/Repositories/capi-vite-example/rollup/src/main.ts:7:27
    6 | import { ss58 } from "capi"
  > 7 | import { pjsSender } from "capi/patterns/compat/pjs_sender"
  >   |                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    8 | import { signature } from "capi/patterns/signature/polkadot"
    9 | 

@parcel/resolver-default: Cannot load file './patterns/compat/pjs_sender' from module 'capi'

[ryanleecode]

Seemingly parcel can import from capi but it can't import any of its patterns

@parcel/core: Failed to resolve 'capi/patterns/compat/pjs_sender' from './src/main.ts'

  /home/ryan/Documents/Repositories/capi-vite-example/rollup/src/main.ts:7:27
    6 | import { ss58 } from "capi"
  > 7 | import { pjsSender } from "capi/patterns/compat/pjs_sender"
  >   |                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    8 | import { signature } from "capi/patterns/signature/polkadot"
    9 | 

@parcel/resolver-default: Cannot load file './patterns/compat/pjs_sender' from module 'capi'

Adding this to package.json fixes the issue.

"@parcel/resolver-default": {
  "packageExports": true
}