examples/upload-file-via-browser - not working #2836

SvenMeyer · 2019-12-17T02:38:27Z

When trying to run the example, I got a strange error message (see below).
Fortunately, I quickly found out that ipfsClient was just initialized the wrong way and also not with the default API port 5001 as stated here:
https://github.com/ipfs/js-ipfs-http-client#importing-the-module-and-usage

changing line 9 in App.js solved the problem:

ipfs = ipfsClient({ host: 'localhost', port: '5001', protocol: 'http' })

Error message from initial run:

[upload-file-via-browser]$ npm install
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 733 packages from 414 contributors and audited 9606 packages in 11.291s
found 0 vulnerabilities

[upload-file-via-browser]$ npm run start

> [email protected] start /home/sum/DEV/IPFS/js-ipfs-http-client/examples/upload-file-via-browser
> webpack-dev-server

ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /static/
ℹ ｢wdm｣: Hash: 186a8be9299a305fc68f
Version: webpack 4.30.0
Time: 2378ms
Built at: 12/17/2019 1:25:23 PM
    Asset      Size  Chunks             Chunk Names
bundle.js  3.41 MiB    main  [emitted]  main
Entrypoint main = bundle.js
[1] multi (webpack)-dev-server/client?http://localhost ./src/index 40 bytes {main} [built]
[../../src/index.js] /home/sum/DEV/IPFS/js-ipfs-http-client/src/index.js 5.51 KiB {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 8.36 KiB {main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {main} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost] (webpack)-dev-server/client?http://localhost 8.26 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./src/App.js] 6.08 KiB {main} [built]
[./src/index.js] 194 bytes {main} [built]
    + 483 hidden modules
ℹ ｢wdm｣: Compiled successfully.

http://localhost:8080/

configure.js:93 Uncaught TypeError: Failed to construct 'URL': Invalid URL
    at getNonRootPath (configure.js:93)
    at eval (configure.js:27)
    at ipfsClient (index.js:21)
    at new App (App.js:47)
    at constructClassInstance (react-dom.development.js:12484)
    at updateClassComponent (react-dom.development.js:14255)
    at beginWork (react-dom.development.js:15082)
    at performUnitOfWork (react-dom.development.js:17820)
    at workLoop (react-dom.development.js:17860)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
getNonRootPath @ configure.js:93
eval @ configure.js:27
ipfsClient @ index.js:21
App @ App.js:47
constructClassInstance @ react-dom.development.js:12484
updateClassComponent @ react-dom.development.js:14255
beginWork @ react-dom.development.js:15082
performUnitOfWork @ react-dom.development.js:17820
workLoop @ react-dom.development.js:17860
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
replayUnitOfWork @ react-dom.development.js:17107
renderRoot @ react-dom.development.js:17979
performWorkOnRoot @ react-dom.development.js:18837
performWork @ react-dom.development.js:18749
performSyncWork @ react-dom.development.js:18723
requestWork @ react-dom.development.js:18592
scheduleWork @ react-dom.development.js:18401
scheduleRootUpdate @ react-dom.development.js:19069
updateContainerAtExpirationTime @ react-dom.development.js:19097
updateContainer @ react-dom.development.js:19154
ReactRoot.render @ react-dom.development.js:19416
eval @ react-dom.development.js:19556
unbatchedUpdates @ react-dom.development.js:18952
legacyRenderSubtreeIntoContainer @ react-dom.development.js:19552
render @ react-dom.development.js:19613
eval @ index.js:9
./src/index.js @ bundle.js:5808
__webpack_require__ @ bundle.js:20
eval @ client:2
1 @ bundle.js:5819
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:84
(anonymous) @ bundle.js:87
Show 5 more frames
react-dom.development.js:15749 The above error occurred in the <App> component:
    in App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:15749
logError @ react-dom.development.js:15783
update.callback @ react-dom.development.js:16649
callCallback @ react-dom.development.js:11164
commitUpdateEffects @ react-dom.development.js:11203
commitUpdateQueue @ react-dom.development.js:11194
commitLifeCycles @ react-dom.development.js:16010
commitAllLifeCycles @ react-dom.development.js:17262
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
commitRoot @ react-dom.development.js:17458
completeRoot @ react-dom.development.js:18912
performWorkOnRoot @ react-dom.development.js:18841
performWork @ react-dom.development.js:18749
performSyncWork @ react-dom.development.js:18723
requestWork @ react-dom.development.js:18592
scheduleWork @ react-dom.development.js:18401
scheduleRootUpdate @ react-dom.development.js:19069
updateContainerAtExpirationTime @ react-dom.development.js:19097
updateContainer @ react-dom.development.js:19154
ReactRoot.render @ react-dom.development.js:19416
eval @ react-dom.development.js:19556
unbatchedUpdates @ react-dom.development.js:18952
legacyRenderSubtreeIntoContainer @ react-dom.development.js:19552
render @ react-dom.development.js:19613
eval @ index.js:9
./src/index.js @ bundle.js:5808
__webpack_require__ @ bundle.js:20
eval @ client:2
1 @ bundle.js:5819
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:84
(anonymous) @ bundle.js:87
Show 4 more frames
react-dom.development.js:18807 Uncaught TypeError: Failed to construct 'URL': Invalid URL
    at getNonRootPath (configure.js:93)
    at eval (configure.js:27)
    at ipfsClient (index.js:21)
    at new App (App.js:47)
    at constructClassInstance (react-dom.development.js:12484)
    at updateClassComponent (react-dom.development.js:14255)
    at beginWork (react-dom.development.js:15082)
    at performUnitOfWork (react-dom.development.js:17820)
    at workLoop (react-dom.development.js:17860)
    at renderRoot (react-dom.development.js:17946)
getNonRootPath @ configure.js:93
eval @ configure.js:27
ipfsClient @ index.js:21
App @ App.js:47
constructClassInstance @ react-dom.development.js:12484
updateClassComponent @ react-dom.development.js:14255
beginWork @ react-dom.development.js:15082
performUnitOfWork @ react-dom.development.js:17820
workLoop @ react-dom.development.js:17860
renderRoot @ react-dom.development.js:17946
performWorkOnRoot @ react-dom.development.js:18837
performWork @ react-dom.development.js:18749
performSyncWork @ react-dom.development.js:18723
requestWork @ react-dom.development.js:18592
scheduleWork @ react-dom.development.js:18401
scheduleRootUpdate @ react-dom.development.js:19069
updateContainerAtExpirationTime @ react-dom.development.js:19097
updateContainer @ react-dom.development.js:19154
ReactRoot.render @ react-dom.development.js:19416
eval @ react-dom.development.js:19556
unbatchedUpdates @ react-dom.development.js:18952
legacyRenderSubtreeIntoContainer @ react-dom.development.js:19552
render @ react-dom.development.js:19613
eval @ index.js:9
./src/index.js @ bundle.js:5808
__webpack_require__ @ bundle.js:20
eval @ client:2
1 @ bundle.js:5819
__webpack_require__ @ bundle.js:20
(anonymous) @ bundle.js:84
(anonymous) @ bundle.js:87

The text was updated successfully, but these errors were encountered:

hsanjuan · 2020-03-06T17:49:49Z

@achingbrain can you check, seems like an easy fix for the example.

re2005 · 2021-04-13T19:45:37Z

Any update on this ?
Thanks

whizzzkid · 2023-05-31T06:33:54Z

js-ipfs is being deprecated in favor of Helia. You can #4336 and read the migration guide.

Please feel to reopen with any comments before 2023-06-05. We will do a final pass on reopened issues afterward (see #4336).

achingbrain transferred this issue from ipfs-inactive/js-ipfs-http-client Mar 9, 2020

achingbrain added the pkg:http-client Issues related only to ipfs-http-client label Mar 9, 2020

BigLep added this to js-ipfs deprecation May 17, 2023

SgtPooki assigned whizzzkid May 17, 2023

SgtPooki moved this to 🥞 Todo in js-ipfs deprecation May 17, 2023

whizzzkid added the kind/wontfix-migration-available label May 24, 2023

whizzzkid moved this from 🥞 Todo to 🛑 Blocked in js-ipfs deprecation May 24, 2023

whizzzkid closed this as completed May 31, 2023

github-project-automation bot moved this from 🛑 Blocked to ✅ Done in js-ipfs deprecation May 31, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

examples/upload-file-via-browser - not working #2836

examples/upload-file-via-browser - not working #2836

SvenMeyer commented Dec 17, 2019

hsanjuan commented Mar 6, 2020

re2005 commented Apr 13, 2021

whizzzkid commented May 31, 2023

examples/upload-file-via-browser - not working #2836

examples/upload-file-via-browser - not working #2836

Comments

SvenMeyer commented Dec 17, 2019

hsanjuan commented Mar 6, 2020

re2005 commented Apr 13, 2021

whizzzkid commented May 31, 2023