Js-ipfs: vue-cli generated project emits errors together with js-ipfs

[guysv]

• 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 #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]

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

[terichadbourne]

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 https://github.com/ProtoSchool/protoschool.github.io/pull/168)

[alanshaw]

@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 https://github.com/ipfs/js-ipfs/issues/1436 😉

[JamesCullum]

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

[npfoss]

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]

this PR https://github.com/ipfs/js-ipfs/pull/1884 will fix this issue.

[hugomrdias]

This issue is resolved in the last release.

[SvenMeyer]

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]

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]

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

[SvenMeyer]

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]

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]

• 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]

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]

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