Error "TypeError: Cannot read property 'indexOf' of undefined" when using ipfs-api

Question

I was performing development using ipfs - api, I encountered the following error, add of image file to ipfs node does not work well. Looking at the details of the error, it seems that protocol is treated as undefined among if (protocol.indexOf ('https') === 0) { in request.js.

This is the error description

Uncaught (in promise) TypeError: Cannot read property 'indexOf' of undefined
    at webpackJsonp../node_modules/ipfs-api/src/utils/request.js.module.exports (request.js:7)
    at requestAPI (send-request.js:165)
    at send (send-request.js:196)
    at send-files-stream.js:99
    at Function.promisify (add.js:41)
    at index.js:32
    at Object.add (add.js:60)
    at VueComponent._callee$ (HaikuCompose.vue?0664:118)
    at tryCatch (runtime.js:62)
    at Generator.invoke [as _invoke] (runtime.js:296)

This is the code I wrote

import IPFS from "ipfs-api"
const ipfsConf = { host: process.env.IPFSHOST, port: process.env.IPFSPORT, protocol: process.env.IPFSPROTCOL }
const ipfs = new IPFS(ipfsConf)

export default {
  name: 'ipfstest',
  data() {
    return {
      file:null,
      buffer:null,
      ipfsHash:null,
    }
  },
  methods: {
    async addipfs() {
      await ipfs.add(this.buffer, (err, ipfsHash) => {
        console.log(err,ipfsHash);
        this.ipfsHash = ipfsHash[0].hash;
      }) 
    },

Answer 1

From the module sources, indexOf on line 7 of the request.js file is used on the variable storing the protocol, which is undefined in your case.

And from your code, I think I can safely assume that your environment variable process.env.IPFSPROTCOL is undefined.

TL:DR : I think you wanted to write IPFSPROTOCOL instead of IPFSPROTCOL