Issues bundling `ipfs` with browserify

[oliveriosousa]

• Version:
  "ipfs": "^0.55.4"

• Platform:

• Subsystem:

Severity:

Medium

Description:

Error bundling ipfs with browserify using the example browser-browserify

Error: Can't walk dependency graph: Cannot find module 'multiformats/hashes/sha2'

This error may be related to the latest commits to js-libp2p-crypto

Steps to reproduce the error:

1. Clone ipfs
2. cd examples/browser-browserify
3. npm run bundle

[welcome]

Thank you for submitting your first issue to this repository! A maintainer will be here shortly to triage and review.
In the meantime, please double-check that you have provided all the necessary information to make this process easy! Any information that can help save additional round trips is useful! We currently aim to give initial feedback within two business days. If this does not happen, feel free to leave a comment.
Please keep an eye on how this issue will be labeled, as labels give an overview of priorities, assignments and additional actions requested by the maintainers:

• "Priority" labels will show how urgent this is for the team.
• "Status" labels will show if this is ready to be worked on, blocked, or in progress.
• "Need" labels will indicate if additional input or analysis is required.

Finally, remember to use https://discuss.ipfs.io if you just need general support.

[achingbrain]

This is probably related to some of the magic that multiformats does around esm/cjs/browser transpilation and bundling.

cc @rvagg @Gozala

[achingbrain]

I think there's something messed up with how esbuild handles the browser field.

The import is here. It should be covered by either the exports or the browser field in the published package.json:

//...
  "exports": {
    //...
    "./hashes/sha2": {
      "browser": "./esm/src/hashes/sha2-browser.js",
      "require": "./cjs/src/hashes/sha2",
      "import": "./esm/src/hashes/sha2"
    },
//...
  "browser": {
    //...
    "./hashes/sha2": "./cjs/src/hashes/sha2-browser.js",

but I don't think it's using those fields to resolve internal imports, so it tries to load the default sha2.js which imports the node crypto module.

It starts to work if I change the browser field locally to be:

//...
  "browser": {
    //...
    "./hashes/sha2": "./cjs/src/hashes/sha2-browser.js",
    "./esm/src/hashes/sha2.js": "./esm/src/hashes/sha2-browser.js"

This field is generated by ipjs.

To generate the above browser field entry this line needs a new block under it like:

      json.browser[key] = _join('cjs', _browser)
      
      if (_import !== _browser) {
        json.browser[_join('esm', _import)] = _join('esm', _browser)
        json.browser[_join('cjs', _import)] = _join('cjs', _browser)
      }

[achingbrain]

(nb. I see this with the examples during the post-install bundling of ipfs-core, before it's even got to the browserify bit).

[achingbrain]

That said I'm having problems replicating this outside of this repo.

[achingbrain]

Actually this is trivial to replicate. Just do:

const basics = require('multiformats/basics')

The basics file is found at esm/src/basics.js and it imports ./hashes/sha2.js.

The relevant esbuild logs are:

 > verbose: Resolving import "./hashes/sha2.js" in directory "/Users/alex/Documents/Workspaces/ipfs/js-ipfs/packages/ipfs-core/node_modules/multiformats/esm/src" of type "import-statement"
   note: Read 5 entries for directory "/Users/alex/Documents/Workspaces/ipfs/js-ipfs/packages/ipfs-core/node_modules/multiformats/esm/src/hashes"
   note: Checking for "esm/src/hashes/sha2.js" in the "browser" map in "/Users/alex/Documents/Workspaces/ipfs/js-ipfs/packages/ipfs-core/node_modules/multiformats/package.json"
   note:   Checking for "esm/src/hashes/sha2.js"
   note:   Checking for "esm/src/hashes/sha2.js.tsx"
   note:   Checking for "esm/src/hashes/sha2.js.ts"
   note:   Checking for "esm/src/hashes/sha2.js.jsx"
   note:   Checking for "esm/src/hashes/sha2.js.js"
   note:   Checking for "esm/src/hashes/sha2.js.css"
   note:   Checking for "esm/src/hashes/sha2.js.json"
   note:   Checking for "esm/src/hashes/sha2.js/index"
   note:   Checking for "esm/src/hashes/sha2.js/index.tsx"
   note:   Checking for "esm/src/hashes/sha2.js/index.ts"
   note:   Checking for "esm/src/hashes/sha2.js/index.jsx"
   note:   Checking for "esm/src/hashes/sha2.js/index.js"
   note:   Checking for "esm/src/hashes/sha2.js/index.css"
   note:   Checking for "esm/src/hashes/sha2.js/index.json"
   note: Checking for "./esm/src/hashes/sha2.js" in the "browser" map in "/Users/alex/Documents/Workspaces/ipfs/js-ipfs/packages/ipfs-core/node_modules/multiformats/package.json"
   note:   Checking for "./esm/src/hashes/sha2.js"
   note:   Checking for "./esm/src/hashes/sha2.js.tsx"
   note:   Checking for "./esm/src/hashes/sha2.js.ts"
   note:   Checking for "./esm/src/hashes/sha2.js.jsx"
   note:   Checking for "./esm/src/hashes/sha2.js.js"
   note:   Checking for "./esm/src/hashes/sha2.js.css"
   note:   Checking for "./esm/src/hashes/sha2.js.json"
   note:   Checking for "./esm/src/hashes/sha2.js/index"
   note:   Checking for "./esm/src/hashes/sha2.js/index.tsx"
   note:   Checking for "./esm/src/hashes/sha2.js/index.ts"
   note:   Checking for "./esm/src/hashes/sha2.js/index.jsx"
   note:   Checking for "./esm/src/hashes/sha2.js/index.js"
   note:   Checking for "./esm/src/hashes/sha2.js/index.css"
   note:   Checking for "./esm/src/hashes/sha2.js/index.json"
   note: Failed to find "esm/src/hashes/sha2.js"
   note: Attempting to load "/Users/alex/Documents/Workspaces/ipfs/js-ipfs/packages/ipfs-core/node_modules/multiformats/esm/src/hashes/sha2.js" as a file
   note:   Checking for file "sha2.js"
   note:   Found file "sha2.js"
   note: Read 5 entries for directory "/Users/alex/Documents/Workspaces/ipfs/js-ipfs/packages/ipfs-core/node_modules/multiformats/esm/src/hashes"
   note: Ignoring "/Users/alex/Documents/Workspaces/ipfs/js-ipfs/packages/ipfs-core/node_modules/multiformats/tsconfig.json" because "/Users/alex/Documents/Workspaces/ipfs/js-ipfs/packages/ipfs-core/node_modules/multiformats/esm/src/hashes/sha2.js" is inside "node_modules"
   note: Primary path is "/Users/alex/Documents/Workspaces/ipfs/js-ipfs/packages/ipfs-core/node_modules/multiformats/esm/src/hashes/sha2.js" in namespace "file"

So ./hashes/sha2.js is being resolved to esm/src/hashes/sha2.js as that's the directory it is in within the multiformats module.

esbuild checks the browser map for an override for esm/src/hashes/sha2.js but doesn't find one, so tries to transpile esm/src/hashes/sha2.js which has the crypto import, which it can't resolve and then explodes.

[achingbrain]

evanw/esbuild#1443

[achingbrain]

mikeal/ipjs#12

[achingbrain]

browserify/resolve#250 (comment)

[achingbrain]

mikeal/ipjs#13

[achingbrain]

multiformats/js-multiformats#105