Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

This crashs everytime when we import ipfs package from vue code

See original GitHub issue

I’m using this package: yarn add ipfs-http-client

And if I import it from vue3, then I run yarn watch, I got errors

https://github.com/ipfs/js-ipfs/issues/3858#issuecomment-1046617510

yarn run v1.22.17
$ node scripts/watch.js
Pre-bundling dependencies:
  vue
  element-plus
  ipfs-http-client
(this will be run only when your dependencies or config have changed)
✘ [ERROR] No matching export in "browser-external:url" for import "parse"

    node_modules/electron-fetch/lib/index.es.js:1:9:
      1 │ import { parse, format, resolve } from 'url';
        ╵          ~~~~~

✘ [ERROR] No matching export in "browser-external:url" for import "format"

    node_modules/electron-fetch/lib/index.es.js:1:16:
      1 │ import { parse, format, resolve } from 'url';
        ╵                 ~~~~~~

✘ [ERROR] No matching export in "browser-external:url" for import "resolve"

    node_modules/electron-fetch/lib/index.es.js:1:24:
      1 │ import { parse, format, resolve } from 'url';
        ╵                         ~~~~~~~

✘ [ERROR] No matching export in "browser-external:http" for import "STATUS_CODES"

    node_modules/electron-fetch/lib/index.es.js:3:9:
      3 │ import { STATUS_CODES } from 'http';
        ╵          ~~~~~~~~~~~~

✘ [ERROR] No matching export in "browser-external:stream" for import "PassThrough"

    node_modules/electron-fetch/lib/index.es.js:6:17:
      6 │ import Stream, { PassThrough } from 'stream';
        ╵                  ~~~~~~~~~~~

Error: Build failed with 5 errors:
node_modules/electron-fetch/lib/index.es.js:1:9: ERROR: No matching export in "browser-external:url" for import "parse"
node_modules/electron-fetch/lib/index.es.js:1:16: ERROR: No matching export in "browser-external:url" for import "format"
node_modules/electron-fetch/lib/index.es.js:1:24: ERROR: No matching export in "browser-external:url" for import "resolve"
node_modules/electron-fetch/lib/index.es.js:3:9: ERROR: No matching export in "browser-external:http" for import "STATUS_CODES"
node_modules/electron-fetch/lib/index.es.js:6:17: ERROR: No matching export in "browser-external:stream" for import "PassThrough"
    at failureErrorWithLog (/Users/yingshaoxo/CS/libgen2/node_modules/esbuild/lib/main.js:1602:15)
    at /Users/yingshaoxo/CS/libgen2/node_modules/esbuild/lib/main.js:1248:28
    at runOnEndCallbacks (/Users/yingshaoxo/CS/libgen2/node_modules/esbuild/lib/main.js:1033:63)
    at buildResponseToResult (/Users/yingshaoxo/CS/libgen2/node_modules/esbuild/lib/main.js:1246:7)
    at /Users/yingshaoxo/CS/libgen2/node_modules/esbuild/lib/main.js:1355:14
    at /Users/yingshaoxo/CS/libgen2/node_modules/esbuild/lib/main.js:665:9
    at handleIncomingPacket (/Users/yingshaoxo/CS/libgen2/node_modules/esbuild/lib/main.js:762:9)
    at Socket.readFromStdout (/Users/yingshaoxo/CS/libgen2/node_modules/esbuild/lib/main.js:632:7)
    at Socket.emit (node:events:390:28)
    at addChunk (node:internal/streams/readable:315:12) {
  errors: [
    {
      detail: undefined,
      location: [Object],
      notes: [],
      pluginName: '',
      text: 'No matching export in "browser-external:url" for import "parse"'
    },
    {
      detail: undefined,
      location: [Object],
      notes: [],
      pluginName: '',
      text: 'No matching export in "browser-external:url" for import "format"'
    },
    {
      detail: undefined,
      location: [Object],
      notes: [],
      pluginName: '',
      text: 'No matching export in "browser-external:url" for import "resolve"'
    },
    {
      detail: undefined,
      location: [Object],
      notes: [],
      pluginName: '',
      text: 'No matching export in "browser-external:http" for import "STATUS_CODES"'
    },
    {
      detail: undefined,
      location: [Object],
      notes: [],
      pluginName: '',
      text: 'No matching export in "browser-external:stream" for import "PassThrough"'
    }
  ],
  warnings: []
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Issue Analytics

State:
Created 2 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

yingshaoxocommented, Feb 21, 2022

You tried import build-in node.js modules in renderer, but it’s impossible. Read Working with dependencies section.

Hi, I would love to have a solution

Because, as you see, ipfs-http-client is indeed a browser-based package, it’s not a node package: https://github.com/ipfs-examples/js-ipfs-http-client-bundle-webpack/blob/main/src/App.js#L2

I just don’t get why by only importing it, I got errors.

0reactions

yingshaoxocommented, Feb 21, 2022

Something in your dependency chain imports the browser-external:http, which in turn tries to import the http, which leads to an error. You should set ipfs-http-client as an external dependency, import it into the preload, and expose the method to renderer.

Thanks, I tried that method.

It indeed works.

But I lost the type-definition, which makes me annoying, which may let me have a chance to make mistakes.