Skip to content
This repository was archived by the owner on Feb 12, 2024. It is now read-only.

vue-cli generated project emits errors together with js-ipfs #1875

Closed
guysv opened this issue Feb 9, 2019 · 15 comments
Closed

vue-cli generated project emits errors together with js-ipfs #1875

guysv opened this issue Feb 9, 2019 · 15 comments
Labels
exp/novice Someone with a little familiarity can pick up kind/bug A bug in existing code (including security flaws) P3 Low: Not priority right now status/in-progress In progress

Comments

@guysv
Copy link

guysv commented Feb 9, 2019 •
edited
Loading

  • Version:
    js-ipfs version: 0.34.4-
    Repo version: 7
    System version: x64/linux
    Node.js version: v11.9.0
  • Platform:
    Linux hostname 4.20.6-arch1-1-ARCH Add to cli: ipfs pin [-r] <ipfs-path> #1 SMP PREEMPT Thu Jan 31 08:22:01 UTC 2019 x86_64 GNU/Linux
  • Subsystem:
    like, all of them

Type:Bug

Severity: High

Description:

I tried to write an IPFS application together with vue.
As soon as I create an IPFS instance, the console is filled with errors

I am no IPFS/javascript/babel/webpack/vue expert whatsoever, so I will be glad for some insight.
This might just be some problem with vue-cli, I have no idea what went wrong :^)

Steps to reproduce the error:

referece repo: https://github.com/guysv/vuebug
clickable link to code: https://github.com/guysv/vuebug/blob/master/src/components/HelloWorld.vue#L34-L44

# install vue-cli
yarn global add @vue/cli

# generate project
vue create vuebug
# (<enter> all the way for default options)

cd vuebug
# install js-ipfs
yarn add ipfs

# Commit buggy code, as seen at https://github.com/guysv/vuebug/blob/master/src/components/HelloWorld.vue#L34-L44

# test app
yarn serve

# browse http://localhost:8080/

# and.. lotsa console errors, like:
_stream_readable.js?c75e:862 Uncaught TypeError: Cannot read property 'reading' of undefined
    at resume_ (_stream_readable.js?c75e:862)
@guysv
Copy link
Author

guysv commented Feb 9, 2019

first 1000 lines of error dump https://pastebin.com/XQJ4pxti

@terichadbourne terichadbourne mentioned this issue Mar 6, 2019
Merged
@terichadbourne
Copy link
Contributor

Adding myself to the thread here to receive status updates. A solution to this problem may also present a better way to address the bundling currently being done with webpack for ProtoSchool. (see ProtoSchool/protoschool.github.io#168)

@alanshaw
Copy link
Member

alanshaw commented Mar 11, 2019 •
edited
Loading

@hugomrdias can you share your really simple fix to this?

It would also be good to get a PR for a simple example that people can copy/paste or refer to when creating a new Vue+IPFS project which would allow us to also close off #1436 😉

@alanshaw alanshaw added kind/bug A bug in existing code (including security flaws) status/in-progress In progress exp/novice Someone with a little familiarity can pick up P3 Low: Not priority right now labels Mar 11, 2019
@JamesCullum
Copy link

Have the same issue - I get TypeError: state is undefined and TypeError: stream is undefined as soon as I call any IPFS function.

@npfoss
Copy link
Contributor

npfoss commented Apr 10, 2019 •
edited
Loading

Same here, does anyone know a way around this?

The best I can do is load it in a <script> and then create a node from the window like so:
(in index.html)

<script src="https://unpkg.com/ipfs/dist/index.js"></script>

(in plugin/anywhere with access to Vue)

Vue.prototype.$ipfs = new window.Ipfs()

// and then access later with
this.$ipfs ... ;

But I'd like to be able to bundle it with my app.

@hugomrdias
Copy link
Member

this PR #1884 will fix this issue.

@hugomrdias
Copy link
Member

This issue is resolved in the last release.

@SvenMeyer
Copy link

I still have the problem ...

    async onSubmit() {
      const reader = new FileReader();
      // Specify the handler for the `load` event
      reader.onloadend = () => {
        const buffer = Buffer.from(reader.result)
        ipfs.add(buffer)
        .then(files => {
          resolve(files)
        })
        .catch(error => reject(error))
      }
      // Read the file
      reader.readAsArrayBuffer(this.fileObj)
    },

File {name: "EtherscanLink.js", lastModified: 1536374397905, lastModifiedDate: Sat Sep 08 2018 12:39:57 GMT+1000 (Australian Eastern Standard Time), webkitRelativePath: "", size: 431, …}
_stream_readable.js?ad71:862 Uncaught TypeError: Cannot read property 'reading' of undefined
    at resume_ (_stream_readable.js?ad71:862)
resume_ @ _stream_readable.js?ad71:862
setTimeout (async)
nextTick @ process.js?4362:2
resume @ _stream_readable.js?ad71:857
Readable.resume @ _stream_readable.js?ad71:848
Readable.on @ _stream_readable.js?ad71:771
Readable.pipe @ _stream_readable.js?ad71:635
eval @ send-files-stream.js?0931:144
eval @ add.js?98fa:49
eval @ index.js?d50a:41
eval @ index.js?d50a:35
eval @ add.js?98fa:68
reader.onloadend @ App.vue?234e:185
FileReader (async)
onSubmit$ @ App.vue?234e:192
tryCatch @ runtime.js?96cf:45
invoke @ runtime.js?96cf:271
prototype.<computed> @ runtime.js?96cf:97
tryCatch @ runtime.js?96cf:45
invoke @ runtime.js?96cf:135
eval @ runtime.js?96cf:170
callInvokeWithMethodAndArg @ runtime.js?96cf:169
enqueue @ runtime.js?96cf:192
prototype.<computed> @ runtime.js?96cf:97
exports.async @ runtime.js?96cf:216
onSubmit @ App.vue?234e:140
handleOk @ App.vue?234e:242
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2175
original._wrapper @ vue.runtime.esm.js?2b0e:6911
_stream_readable.js?ad71:862 Uncaught TypeError: Cannot read property 'reading' of undefined
    at resume_ (_stream_readable.js?ad71:862)
resume_ @ _stream_readable.js?ad71:862
setTimeout (async)
nextTick @ process.js?4362:2
resume @ _stream_readable.js?ad71:857
Readable.resume @ _stream_readable.js?ad71:848
Readable.on @ _stream_readable.js?ad71:771
Readable.pipe @ _stream_readable.js?ad71:635
eval @ add.js?98fa:52
eval @ index.js?d50a:41
eval @ index.js?d50a:35
eval @ add.js?98fa:68
reader.onloadend @ App.vue?234e:185
FileReader (async)
onSubmit$ @ App.vue?234e:192
tryCatch @ runtime.js?96cf:45
invoke @ runtime.js?96cf:271
prototype.<computed> @ runtime.js?96cf:97
tryCatch @ runtime.js?96cf:45
invoke @ runtime.js?96cf:135
eval @ runtime.js?96cf:170
callInvokeWithMethodAndArg @ runtime.js?96cf:169
enqueue @ runtime.js?96cf:192
prototype.<computed> @ runtime.js?96cf:97
exports.async @ runtime.js?96cf:216
onSubmit @ App.vue?234e:140
handleOk @ App.vue?234e:242
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2175
original._wrapper @ vue.runtime.esm.js?2b0e:6911
_stream_readable.js?ad71:546 Uncaught TypeError: Cannot read property 'length' of undefined
    at maybeReadMore_ (_stream_readable.js?ad71:546)
maybeReadMore_ @ _stream_readable.js?ad71:546
setTimeout (async)
nextTick @ process.js?4362:2
maybeReadMore @ _stream_readable.js?ad71:541
addChunk @ _stream_readable.js?ad71:304
readableAddChunk @ _stream_readable.js?ad71:278
Readable.push @ _stream_readable.js?ad71:239
Transform.push @ _stream_transform.js?27bf:139
_pushFile @ multipart.js?c2c2:70
_maybeDrain @ multipart.js?c2c2:50
_transform @ multipart.js?c2c2:42
Transform._read @ _stream_transform.js?27bf:177
Transform._write @ _stream_transform.js?27bf:164
doWrite @ _stream_writable.js?dc14:405
writeOrBuffer @ _stream_writable.js?dc14:394
Writable.write @ _stream_writable.js?dc14:303
writing @ send-files-stream.js?0931:51
eval @ withoutIndex.js?8fa0:9
replenish @ eachOfLimit.js?343a:66
eval @ eachOfLimit.js?343a:71
eachLimit @ eachLimit.js?b4cb:43
eval @ doLimit.js?3e91:9
retStream._write @ send-files-stream.js?0931:49
doWrite @ _stream_writable.js?dc14:405
writeOrBuffer @ _stream_writable.js?dc14:394
Writable.write @ _stream_writable.js?dc14:303
eval @ add.js?98fa:54
eval @ add.js?98fa:54
eval @ index.js?d50a:41
eval @ index.js?d50a:35
eval @ add.js?98fa:68
reader.onloadend @ App.vue?234e:185
FileReader (async)
onSubmit$ @ App.vue?234e:192
tryCatch @ runtime.js?96cf:45
invoke @ runtime.js?96cf:271
prototype.<computed> @ runtime.js?96cf:97
tryCatch @ runtime.js?96cf:45
invoke @ runtime.js?96cf:135
eval @ runtime.js?96cf:170
callInvokeWithMethodAndArg @ runtime.js?96cf:169
enqueue @ runtime.js?96cf:192
prototype.<computed> @ runtime.js?96cf:97
exports.async @ runtime.js?96cf:216
onSubmit @ App.vue?234e:140
handleOk @ App.vue?234e:242
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2175
original._wrapper @ vue.runtime.esm.js?2b0e:6911
_stream_writable.js?dc14:473 Uncaught TypeError: Cannot read property 'length' of undefined
    at onwriteDrain (_stream_writable.js?dc14:473)
    at afterWrite (_stream_writable.js?dc14:463)
onwriteDrain @ _stream_writable.js?dc14:473
afterWrite @ _stream_writable.js?dc14:463
setTimeout (async)
nextTick @ process.js?4362:2
onwrite @ _stream_writable.js?dc14:455
WritableState.onwrite @ _stream_writable.js?dc14:158
afterTransform @ _stream_transform.js?27bf:89
_maybeDrain @ multipart.js?c2c2:60
eval @ multipart.js?c2c2:55
_pushFile @ multipart.js?c2c2:77
_maybeDrain @ multipart.js?c2c2:50
_transform @ multipart.js?c2c2:42
Transform._read @ _stream_transform.js?27bf:177
Transform._write @ _stream_transform.js?27bf:164
doWrite @ _stream_writable.js?dc14:405
writeOrBuffer @ _stream_writable.js?dc14:394
Writable.write @ _stream_writable.js?dc14:303
writing @ send-files-stream.js?0931:51
eval @ withoutIndex.js?8fa0:9
replenish @ eachOfLimit.js?343a:66
eval @ eachOfLimit.js?343a:71
eachLimit @ eachLimit.js?b4cb:43
eval @ doLimit.js?3e91:9
retStream._write @ send-files-stream.js?0931:49
doWrite @ _stream_writable.js?dc14:405
writeOrBuffer @ _stream_writable.js?dc14:394
Writable.write @ _stream_writable.js?dc14:303
eval @ add.js?98fa:54
eval @ add.js?98fa:54
eval @ index.js?d50a:41
eval @ index.js?d50a:35
eval @ add.js?98fa:68
reader.onloadend @ App.vue?234e:185
FileReader (async)
onSubmit$ @ App.vue?234e:192
tryCatch @ runtime.js?96cf:45
invoke @ runtime.js?96cf:271
prototype.<computed> @ runtime.js?96cf:97
tryCatch @ runtime.js?96cf:45
invoke @ runtime.js?96cf:135
eval @ runtime.js?96cf:170
callInvokeWithMethodAndArg @ runtime.js?96cf:169
enqueue @ runtime.js?96cf:192
prototype.<computed> @ runtime.js?96cf:97
exports.async @ runtime.js?96cf:216
onSubmit @ App.vue?234e:140
handleOk @ App.vue?234e:242
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2175
original._wrapper @ vue.runtime.esm.js?2b0e:6911

@alanshaw
Copy link
Member

alanshaw commented Dec 11, 2019 •
edited
Loading

Looks like you're using js-ipfs-http-client not js-ipfs - is that right? If so then please update to the latest version, try again and open an issue on https://github.com/ipfs/js-ipfs-http-client/issues if you're still having problems.

@alanshaw
Copy link
Member

alanshaw commented Dec 11, 2019 •
edited
Loading

Also note that you can pass File objects to ipfs.add now.

@SvenMeyer
Copy link

Thanks for your feedback.

  1. I want to upload a file from using a Vue App in a browser, so I assume 'js-ipfs-http-client' is the right choice?
  2. Using the most recent version, and actually after some npm (re)install, that error was gone.
  3. Would love to pass a 'File' object, but as far as I experienced, it only works in node, not in a browser
  4. Was struggling to add Buffer,FileStreamReader, ... whatever to get the code to work, with no success - this is far too complicated for any "average" (I count me in) JavaScript developer, doesn't help adoption.

@npfoss
Copy link
Contributor

npfoss commented Dec 12, 2019

I don't know anything about the http-client (I'm just running a full node in my Vue app and it works great), but I do know that you might have better luck on the forum where more people will see your question

@alanshaw
Copy link
Member

  • I want to upload a file from using a Vue App in a browser, so I assume 'js-ipfs-http-client' is the right choice?

You can run an ipfs node in your browser - js-ipfs. If you have a remote node you want to talk to you'll need to use the HTTP client - js-ipfs-http-client.

  • Using the most recent version, and actually after some npm (re)install, that error was gone.

🎉

  • Would love to pass a 'File' object, but as far as I experienced, it only works in node, not in a browser

Ok, well, that sounds like a bug. If you have a error message and/or stack trace, please open an issue here and we can help you out.

  • Was struggling to add Buffer,FileStreamReader, ... whatever to get the code to work, with no success - this is far too complicated for any "average" (I count me in) JavaScript developer, doesn't help adoption.

You shouldn't need Buffer or FileStreamReader to add File objects from the browser. Is there a tutorial you're following that we need to update or a better example we could add?

We have an example here https://github.com/ipfs/js-ipfs-http-client/tree/master/examples/upload-file-via-browser which is react, but you can maybe get some inspiration from it.

@SvenMeyer
Copy link

SvenMeyer commented Dec 17, 2019 •
edited
Loading

Thanks a lot for that.
Got the browser upload example working, but had to change 1 line of code.
https://github.com/ipfs/js-ipfs-http-client/issues/1201

@SvenMeyer
Copy link

Looks like as if the addwith a file object did not work because I used an old version ("ipfs-http-client": "^29.1.0",)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
exp/novice Someone with a little familiarity can pick up kind/bug A bug in existing code (including security flaws) P3 Low: Not priority right now status/in-progress In progress
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@SvenMeyer @alanshaw @hugomrdias @JamesCullum @npfoss @terichadbourne @guysv