Encountering the "TypeError: Unable to access property 'indexOf' of undefined" error while utilizing the ipfs-api

During my development work with the ipfs-api, I ran into an issue where adding an image file to the ipfs node was not functioning properly. Upon further investigation into the error details, it appears that the protocol is being treated as undefined in the if statement: if (protocol.indexOf('https') === 0) { in request.js.

Here is a description of the error:

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 snippet I implemented:

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

Within the module sources, the indexOf function on line 7 of the request.js file is utilized to search for the protocol variable, which appears to be undefined in your particular scenario.

Based on your code snippet, it seems apparent that the environment variable process.env.IPFSPROTCOL is not defined.

In summary: It seems like you may have intended to reference IPFSPROTOCOL instead of IPFSPROTCOL

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the wonders of LoopBack querying

Discovering loopback has been an enlightening experience for me. However, as I delve deeper into its functionalities, I've stumbled upon something unexpected. I noticed that when executing queries, such as using the updateAll method, if a parameter i ...

Troubleshooting Vue.js 2 Routing Issues: Difficulty Accessing Posts Variable

My first venture into Vue.js involves working with WP REST API. Initially, all my posts are displayed perfectly. However, when I attempt to integrate Vue-router, the component responsible for showcasing all the posts, 'home-post-list', breaks do ...

Event in Bootstrap modal fails to activate

I've been attempting to link some code to execute when my modal is opened. Despite successfully opening the modal, I am puzzled as to why my event fails to trigger. Below is the structure of my modal: <div id="details" class="modal fade" style="d ...

utilizing different types of text style

Whenever I write a paragraph, I want the text to be styled like this: Click here for alt text http://img6.imageshack.us/img6/9894/fullscreencapture282010.jpg Do I need to use CSS to achieve this kind of formatting? I'd like it to look similar. ...

Is there a way to create an image gallery layout similar to Pinterest using CSS?

I am currently developing a dynamic PHP gallery that will feature thumbnails with the same width but varying heights. These thumbnails will be arranged from left to right, so I would prefer not to use a traditional five-column layout. I suspect that achiev ...

When function A invokes function B, function B reciprocates by calling function A. An ESLint error is raised, stating 'functionB' was utilized prior to its declaration

Imagine this scenario: a function called A is defined first and within it, function B is called; then function B is defined which in turn calls function A. The code looks like this: import { useState } from "react"; export default function App() ...

Storing the usernames of users through local storage is essential for data preservation

My instructor mentioned a unique way to store user names using "localstorage" and arrays in JavaScript. This method ensures that the names are saved even if the page is reloaded. Here is the code snippet for achieving this functionality: html: <!doctyp ...

Unable to incorporate node-vibrant into Angular 7 project

Currently facing some challenges while attempting to integrate node-vibrant into my Angular 7 project: -Successfully imported with import * as Vibrant from 'node-vibrant';, but encountering a warning in VS Code: Module '"/Users/xxxx/Docume ...

Error encountered during navigation: navigator has not been defined

I encountered an issue where the page gets redirected upon form submission without triggering the catch block. However, in the backend, I am facing an error stating that the API body is not being executed. Below is the code snippet of the page: "use cl ...

Exploring the world of CouchDB through jQuery and AJAX POST requests while navigating

I am in the process of building a simple web application. Today, I installed Couch 1.3.1 and set up a database. I am currently trying to save a document to my local Couch (localhost:5984) using a POST request from a client browser that is also on localhost ...

Tips for efficiently storing and accessing data obtained from the "RESTBuilder" tool on the Total.js platform

After stumbling upon this informative tutorial on how to build a cryptocurrency comparison site with VueJs, I was inspired to create a single-page application using the total.js platform. My goal is to fetch the list of coins from the "coinmarketcap.com" A ...

Is the create attachment function of the Microsoft Graph API not functioning properly?

I've been trying to create an attachment for my messages by following the documentation provided, but unfortunately, the API seems to be giving me some trouble. I referred to the document at for guidance. Below is the JavaScript code that I have bee ...

How can I create a redirect link in HTML that opens in a new window

I have a HTML page where I need to redirect to the next page. <a href="www.facebook.com" target="_blank">www.facebbok.com</a> Currently, it is redirecting to localhost:9000/dashboard/www.facebook.com But I only want to redirect to www.facebo ...

When working with Vue 3, remember that inject() function is only allowed within setup or functional components

I'm puzzled as to why I keep encountering this error. I am attempting to utilize the Vuex store in a composition function, but for some reason, it keeps throwing an error regarding inject (even though I'm not using inject at all). My application ...

What is the process for selecting the Node version when installing with .nvm?

I am having an issue with nvm in the terminal. When I try to run npm install <something>, it always installs the package in node version 9.4.0, regardless of the version set using nvm. Even after switching to node version 10.15.3 using nvm use v10.1 ...

What is the process for modifying JSON attributes with JavaScript?

One JSON data set is provided below: [{ ID: '0001591', name: 'EDUARDO DE BARROS THOMÉ', class: 'EM1A', 'phone Pai': '(11) 999822922', 'email Pai': '<a href="/cdn-cgi/l/em ...

Is there a way to utilize localStorage to retain a classlist toggle status for a light/dark mode theme switch on the browser?

I am currently working on a portfolio website that features a light/dark mode theme switch. The functionality of the switch is working properly, but it doesn't save the user's preference when they refresh the page or navigate to another section. ...

How can I troubleshoot the unresponsive remove div function on my website?

My code is running fine on CodePen (link provided below), but for some reason, it's not working properly in the web browser. I am executing the code from localhost and the button isn't responding as expected. CODE Here is my Visual Studio code ...

toggle switch for numerical input

Whenever the "Qty" radio button is selected, I need to activate an input box that accepts numbers. Conversely, when the "rate" radio button is clicked, I want to disable this input box. This is how I designed it: <input type="radio" class="radioBtn" ...

What is the method to retrieve results using 'return' from NeDB in vue.js?

Seeking assistance on retrieving data from NeDB within a method in a .vue file using electron-vue. Currently, I am aware that the data can be stored in a variable, but my preference is to fetch it using 'return' as I intend to utilize the result ...