search

ipfs / js-ipfs

IPFS implementation in JavaScript
https://js.ipfs.tech
Other
7.44k stars 1.25k forks source link

Unable to obtain files using ipfs.ls command after connecting to IPFS using js-ipfs in the browser using create-react-app #3179

Closed ltfschoen closed 1 year ago

ltfschoen commented 4 years ago

Severity:

Critical

Description:

I'm trying to using js-ipfs in the browser in this pull request https://github.com/ltfschoen/ethquad/pull/10, and it connects to IPFS in the browser, which I setup using this template https://github.com/ipfs/js-ipfs/tree/master/examples/browser-create-react-app, but when I try to list the directory of an IPFS hash using ipfs.ls https://github.com/ipfs/js-ipfs/blob/master/docs/core-api/FILES.md#ipfslsipfspath, it gives error in browser that there aren't any files, even though there are all my website's front-end files at https://ipfs.io/ipfs/Qmacyc6tEV5NB5ojHgwznjfP7htJwLVx5gwDNT6MZiEKdy since it was uploaded using Pinata SDK using wrapWithDirectory https://github.com/ltfschoen/ethquad/blob/master/scripts/pinataUploadIpfs.js#L68 (it just takes a while to load them if you go to that address): 

Ipfs props:  {cid: "Qmacyc6tEV5NB5ojHgwznjfP7htJwLVx5gwDNT6MZiEKdy"}
Ipfs.js:11 ipfs:  Proxy {bitswap: {…}, block: {…}, bootstrap: {…}, add: ƒ, addAll: ƒ, …}[[Handler]]: Object[[Target]]: Object[[IsRevoked]]: false
Ipfs.js:15 files:  {}
client.js:12 WebSocket connection to 'ws://127.0.0.1:8081/p2p/QmZMxNdpMkewiVZLMRxaNxUeZpDUb34pWjZ1kZvsd16Zic' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
client.js:12 WebSocket connection to 'ws://127.0.0.1:8081/p2p/QmY7JB6MQXhxHvq7dBDh4HpbH29v4yE9JRadAVpndvzySN' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
...

Steps to reproduce the error:

Clone https://github.com/ltfschoen/ethquad Checkout branch of PR https://github.com/ltfschoen/ethquad/pull/10 by running git fetch origin luke/connect-ipfs:luke/connect-ipfs && git checkout luke/connect-ipfs

Follow steps to setup:

Go to localhost:3000

View errorrs in browser console

welcome[bot] commented 4 years ago

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:

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

achingbrain commented 4 years ago

Is there anything else I'm supposed to do to replicate? I've followed the instructions but don't see any relevant errors, just a 500 from http://localhost:5000/api/beacon/chainhead which I guess is being caused by the Invalid URL in the console output. Some missing config perhaps?

Browser:

image

Console:

[1] Starting the development server...
[1] 
[1] Compiled with warnings.
[1] 
[1] ./src/components/Ipfs.js
[1]   Line 2:38:  'Spinner' is defined but never used  no-unused-vars
[1] 
[1] ./src/components/Beacon.js
[1]   Line 50:13:  'chainHead' is assigned a value but never used  no-unused-vars
[1] 
[1] Search for the keywords to learn more about each warning.
[1] To ignore, add // eslint-disable-next-line to the line before.
[1] 
[0] Received GET request at API endpoint /api/getWebsiteIPFSHash
[0] Connecting to Pinata
[0] (node:63095) UnhandledPromiseRejectionWarning: Error: No pinataApiKey provided! Please provide your pinata api key as an argument when you start this script
[0]     at validateApiKeys (/Users/alex/Documents/Workspaces/ltfschoen/ethquad/node_modules/@pinata/sdk/lib/pinata-sdk.js:22853:11)
[0]     at testAuthentication (/Users/alex/Documents/Workspaces/ltfschoen/ethquad/node_modules/@pinata/sdk/lib/pinata-sdk.js:21808:35)
[0]     at Object.client.testAuthentication (/Users/alex/Documents/Workspaces/ltfschoen/ethquad/node_modules/@pinata/sdk/lib/pinata-sdk.js:22808:47)
[0]     at connectToPinata (/Users/alex/Documents/Workspaces/ltfschoen/ethquad/server/helpers/connectToPinata.js:6:31)
[0]     at processTicksAndRejections (internal/process/task_queues.js:93:5)
[0]     at async /Users/alex/Documents/Workspaces/ltfschoen/ethquad/server/server.js:58:14
[0] (Use `node --trace-warnings ...` to show where the warning was created)
[0] (node:63095) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
[0] (node:63095) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
[0] Getting Beacon Chain Head
[0] getChainHead
[0] Error getChainHead:  TypeError [ERR_INVALID_URL]: Invalid URL: undefined/beacon/chainhead
[0]     at onParseError (internal/url.js:256:9)
[0]     at new URL (internal/url.js:332:5)
[0]     at Object.getChainHead (/Users/alex/Documents/Workspaces/ltfschoen/ethquad/server/middleware/beaconMiddleware.js:15:17)
[0]     at app.get.chainHead (/Users/alex/Documents/Workspaces/ltfschoen/ethquad/server/server.js:89:28)
[0]     at Layer.handle [as handle_request] (/Users/alex/Documents/Workspaces/ltfschoen/ethquad/node_modules/express/lib/router/layer.js:95:5)
[0]     at next (/Users/alex/Documents/Workspaces/ltfschoen/ethquad/node_modules/express/lib/router/route.js:137:13)
[0]     at cors (/Users/alex/Documents/Workspaces/ltfschoen/ethquad/node_modules/cors/lib/index.js:188:7)
[0]     at /Users/alex/Documents/Workspaces/ltfschoen/ethquad/node_modules/cors/lib/index.js:224:17
[0]     at origin (/Users/alex/Documents/Workspaces/ltfschoen/ethquad/server/server.js:27:7)
[0]     at /Users/alex/Documents/Workspaces/ltfschoen/ethquad/node_modules/cors/lib/index.js:219:13 {
[0]   input: 'undefined/beacon/chainhead',
[0]   code: 'ERR_INVALID_URL'
[0] }
[0] TypeError [ERR_INVALID_URL]: Invalid URL: undefined/beacon/chainhead
[0]     at onParseError (internal/url.js:256:9)
[0]     at new URL (internal/url.js:332:5)
[0]     at Object.getChainHead (/Users/alex/Documents/Workspaces/ltfschoen/ethquad/server/middleware/beaconMiddleware.js:15:17)
[0]     at app.get.chainHead (/Users/alex/Documents/Workspaces/ltfschoen/ethquad/server/server.js:89:28)
[0]     at Layer.handle [as handle_request] (/Users/alex/Documents/Workspaces/ltfschoen/ethquad/node_modules/express/lib/router/layer.js:95:5)
[0]     at next (/Users/alex/Documents/Workspaces/ltfschoen/ethquad/node_modules/express/lib/router/route.js:137:13)
[0]     at cors (/Users/alex/Documents/Workspaces/ltfschoen/ethquad/node_modules/cors/lib/index.js:188:7)
[0]     at /Users/alex/Documents/Workspaces/ltfschoen/ethquad/node_modules/cors/lib/index.js:224:17
[0]     at origin (/Users/alex/Documents/Workspaces/ltfschoen/ethquad/server/server.js:27:7)
[0]     at /Users/alex/Documents/Workspaces/ltfschoen/ethquad/node_modules/cors/lib/index.js:219:13
ltfschoen commented 4 years ago

@achingbrain Thanks for the feedback. I just tried it again and I had the same issues as you. I had to make the following changes to replicate the error again since it looks like some things have changed.

1) In the step where I've said to follow these steps https://github.com/ltfschoen/ethquad#connect-to-lotus-filecoin-and-ipfs, could you please modify this line of code after you clone the repo https://github.com/textileio/powergate/blob/master/docker/docker-compose-localnet.yaml#L26 to instead be image: textile/lotus-devnet:latest (since there appears to be an issue now using v0.4.0 of Lotus, as I noticed errors connecting to it in the logs, but when I used latest instead it worked again)

2) In the step where I've said to follow https://github.com/ltfschoen/ethquad#develop-website-locally-without-deployment-to-ipfs, could you please edit the code and just comment out this line so it becomes {/* <Beacon /> */} https://github.com/ltfschoen/ethquad/pull/10/files#diff-57f023f88f23f624aec6289090405c9bR345 before you run yarn dev (so it doesn't try to connect to the Eth 2.0 beacon chain, as it's not connecting to it for some reason, but it's not relevant to this issue)

ltfschoen commented 4 years ago

@achingbrain Note that step 2. mentioned in my last comment shouldn't be necessary now, as Infura's Eth 2.0 is back online again

achingbrain commented 1 year ago

js-ipfs is being deprecated in favor of Helia. You can https://github.com/ipfs/js-ipfs/issues/4336 and read the migration guide.

If you never managed to resolve this I would suggest migrating to Helia, it has many more connectivity options which are usually the problem when nodes can't resolve content.