Uncaught (in promise) TypeError: Cannot read property 'prototype' of undefined

2.5k Views Asked by At

I'm working in a project with electronjs + vue to implement adb operations in desktop application. For the implementation of this i am using the node library adbkit.

When I tried to load script i get an error during the require('adbkit') operation during webpack. The error that i got is the following:

enter image description here

My configuration for webpack is the following:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  
  configureWebpack: {
    resolve: {
      fallback: {
        "crypto": require.resolve("crypto-browserify"),
      },
      
    },
    externals:{
      "fs": require("fs"),
      "child_process": require("child_process"),

    }
  },
})

The script that i am using to get device storage:

/* eslint-disable */
export function memory() {
  var Promise = require('bluebird');
  var adb = require('adbkit');
  const client = adb.createClient();
  //var readline = require('readline');
  var capaccity = null;
  var used = null;
  var free = null;
  var stat = null;


  return new Promise(function (resolve) {
    client.listDevices()
      .then(function (devices) {
        if(devices.length != 0) {
          console.log('Device %s ', devices[0].id)
          var check = false;
          client.shell(devices[0].id, "df -h", function (err, output) {
            if (err) {
              console.log(err);
            }
            var readStream = output;
            
            var importantdata = [];
            readStream
              .on('data', function (data) {
                //console.log('Data!', data.toString());  
                var lines = data.toString().split('n');
                //if(lines.includes('/dev/fuse')){
                //    console.log(lines);
                //}
                lines.forEach(element => {
                  if (element.includes('/dev/fuse')) {
                    //console.log(element)
                    var info = element.toString().split(' ');
                    info.forEach(info => {
                      if (info != '') {
                        importantdata.push(info)
                      }
                    })

                  }
                });

                if (importantdata.length != 0) {
                  capaccity = importantdata[1] + 'B'
                  used = importantdata[2] + 'B'
                  free = importantdata[3] + 'B'
                  stat = '"'+importantdata[4]+'"'
                  check = true
                  //console.log([capaccity, used, free, stat]);
                  resolve([capaccity, used, free, stat])
                }
              })
              .on('error', function (err) { console.error('Error', err); })


          })
          if (check == false) {
            client.shell(devices[0].id, "df", function (err, output, capaccity, used, free, stat, importantdata) {
              if (err) {
                console.log(err);
              }
              var readStream = output;
              importantdata = [];
              readStream
                .on('data', function (data) {
                  //console.log('Data!', data.toString());  
                  var lines = data.toString().split('n');
                  lines.forEach(element => {
                    if (element.includes('/storage/emulated')) {
                      //console.log(element)
                      var info = element.toString().split(' ');
                      info.forEach(info => {
                        if (info != '') {
                          importantdata.push(info)

                        }
                      })

                    }
                  });
                  if (importantdata.length != 0) {
                    capaccity = importantdata[1] + 'B'
                    used = importantdata[2] + 'B'
                    free = importantdata[3] + 'B'
                    stat = '"'+((parseFloat(importantdata[2].replace('G', '')) / parseFloat(importantdata[1].replace('G', ''))) * 100.0).toFixed(2) + '%"';
                    //return [capaccity, used, free, percentage]
                    //console.log([capaccity, used, free, stat]);
                    resolve([capaccity, used, free, stat])
                  }
                })
                .on('error', function (err) { console.error('Error', err); })



            })
          }
        }



      })
  })

}

And the view when i execute the following script:

<template >
  <div class="home">
    <img src="../assets/mobile_image.png" class="imagemobile" />
    <h1 class="textheader">
      <font size="5" id="brand">Teléfono Móvil</font>
    </h1>
    <h2 class="modelo">
      <font size="3" id="model"> Modelo </font>
    </h2>
    
    <h3 class="textcontent">
      <i> Información sobre el Teléfono </i>
    </h3>

    <div class="barcontent">
      
      <div style="text-align: left;">Almacenamiento</div>
      
      
      <div class="progress-bar">
        <div class="progress-bar-fill-ocuppied"></div> <!--- PREGUNTAR SI ASI O ABAJO -->
      </div>
      
      <div style="display:inline">
        
        <p id="alma-ocupado" class="info-alma-ocupado">Ocupados 114GB</p>
        
        <p id="alma-disp" class="info-alma-libre">Libres 24GB</p>
      </div>
      <div class="totalcapacity">Almacenamiento total: 128 GB</div>
      
      
    </div>
    <img src="../assets/android.jpg" class="imageandroid" />
  </div>
</template>

<script>
import {memory} from './prueba'

export default {
  name: "HomeView",
  mounted(){
    
    const pb1 = new ProgressBar(document.querySelector('.progress-bar'));
    pb1.setValue("0%");
    
    memory().then(function (resolve) {
      pb1.setValue(resolve[3])
    })
    

    

  },
};
class ProgressBar{
  constructor(element,initialValue="0%"){
    this.Ocuppied = element.querySelector('.progress-bar-fill-ocuppied');
    this.setValue(initialValue);
  }

  setValue (newValue){
    this.value = newValue;
    this.update();
  }

  update(){
    const percentageoccupied = this.value;

    this.Ocuppied.style.width = percentageoccupied;
    
  }

 
}
   
</script>

<style>
.info-alma-ocupado{
  text-align: left;
  
  display: inline;
  
  width: 50%;
  padding-left: 0px;
  margin-right: 33%;
}
.info-alma-libre{
  display: inline;
  width: 100%;
  height: 50%;
  text-align: right !important;
  align-items: right !important;
  margin-left: 33%;
}
.bloque{
  display: inline-block;
  align-content: initial;
}
.imagemobile {
  float: left;
  margin-left: 10%;
  margin-top: 5%;
  width: 15%;
  height: auto;
}
.imageandroid {
  margin-right: 10%;
  margin-top: 5%;
  float: right;
  width: 20%;
  height: auto;
}
.textheader {
  margin: 0;
  position: absolute;
  margin-top: 5%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 90%;
}

.modelo {
  margin: 0;
  position: absolute;
  margin-top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 90%;
}
.textcontent {
  margin: 0;
  position: absolute;
  margin-top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 60%;
}

.almacenamiento {
  text-align: left;
}

.barcontent {
  margin: 0;
  position: absolute;
  margin-top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 90%;
  border: 20px;
  
  /*border: 10px solid #000; */
}


.progress-bar {
  position: relative;
  float: center;
  width: 600px;
  height: 50px;
  border: 1px solid #000;
  background-color: #0a9905;
}

.progress-bar-fill-ocuppied {
  float: left;
  height: 100%;
  width: 40%;
  background: #9b0b0b;
  transition: width 0.5s;
  position: absolute;
}


</style>

The result of the script should be that i got the percentatge of storage and then show it in front

0

There are 0 best solutions below