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

Question

Im trying to get QuggaJS to work in my Ionic3/Angular4 App. But im always getting the error:

Uncaught (in promise): TypeError: Cannot read property 'init' of undefined TypeError: Cannot read property 'init' of undefined at new Scanner

I really dont know why Quarra is undefined, because I imported it to my project normally? First I did:

npm install quagga

and after that it did import it in my project as follows:

import * as Quagga from 'quagga';

but I'm still getting the error.

My Typescript code looks like this:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import * as Quagga from 'quagga';

@Component({
  selector: 'page-scanner',
  templateUrl: 'scanner.html',
})
export class Scanner {

  constructor(public navCtrl: NavController,
    public navParams: NavParams) {
      Quagga.init({
          inputStream : {
              name : "Live",
              type : "LiveStream",
               // Or '#yourElement' (optional)
              target: document.querySelector('#scanner')
          },
          decoder : {
           //Change Reader for the right Codes
           readers: [ "code_128_reader",
                      "ean_reader",
                      "ean_8_reader",
                      "code_39_reader",
                      "code_39_vin_reader",
                      "codabar_reader",
                      "upc_reader",
                      "upc_e_reader",
                      "i2of5_reader" ],
          }
        }, function(err) {
            if (err) {
                console.log(err);
                return
            }
            console.log("Initialization finished. Ready to start");
            Quagga.start();
        });
  }
}

I really hope you guys can figure that out! Thanks for helping

If you're using an environment with `import`, why would you also use `require`? — T.J. Crowder, Jul 19 '17 at 08:41
Oh sry didnt delete that. I only tried if it would change something but it does not. — , Jul 19 '17 at 08:42
The [example in the documentation](https://serratus.github.io/quaggaJS/) is `import Quagga from 'quagga';`, not `import * as Quagga from 'quagga';`. Why are you using the latter? — T.J. Crowder, Jul 19 '17 at 08:44
I think some other people have faced same issue, you can refer thread of stackoverflow https://stackoverflow.com/questions/42555644/quaggajs-with-angular-2-problems — Harpreet, Jul 19 '17 at 08:45
Because import Quagga from 'quagga'; did not work so I tried it with the letter but still doesnt work. — , Jul 19 '17 at 08:46
@Harpreet thank you so much. Im sorry I couldnt find that thread. Sloved my problem! Its working now. Please add it as answer so I can mark it as Solution. Or better Post the same Code so people dont need to move to the other Post. cheers — , Jul 19 '17 at 08:55
As you have accepted answer so can't add answer but sharing link for reference again https://stackoverflow.com/questions/42555644/quaggajs-with-angular-2-problems you can upvote comment if it helped :) — Harpreet, Jul 19 '17 at 09:05

SrAxi · Accepted Answer · 2017-07-19T09:03:04.980

0

If you are using Angular-CLI add this to your scripts array (same thing for webpack):

"scripts": [
        "node_modules/path/qugga.min.js"
      ],

Add this:

declare var Quagga:any;

Resulting in:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import * as Quagga from 'quagga';

@Component({
  selector: 'page-scanner',
  templateUrl: 'scanner.html',
})
export class Scanner {

  constructor(public navCtrl: NavController,
    public navParams: NavParams) {}

  ngOnInit() {
      Quagga.init({

Also, if this doesn't quite work, move your Quagga.init({ to ngOnInit() so you are sure that the component fully loaded.

edited Jul 19 '17 at 09:03

answered Jul 19 '17 at 08:53

SrAxi

19,787
11
46
65

please Update your Code with ngOnInit , because I needed that. Also note that I needed both import Quagga from 'quagga'; and declare var Quagga:any; to get it to work. – Jul 19 '17 at 08:57
@lukay97 Brilliant, I'm so glad it turned out well. I updated my answer, hope it can help other people with the same issue! Cheers! – SrAxi Jul 19 '17 at 09:04

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

1 Answers1