Ionic 4 Barcode Scanner Plugin Compile Error

#1

Barcode Scanner causes compile errors when importing into an Ionic 4 app.

  1. ionic start junk blank --type=angular
  2. npm install @ionic-native/barcode-scanner
  3. add import to home.page.ts
import { Component } from '@angular/core';
import { BarcodeScanner } from '@ionic-native/barcode-scanner';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
    constructor(private barcodeScanner: BarcodeScanner) {}
}

ionic build --prod gives this error:

ERROR in @ionic-native\barcode-scanner\index.ts(104,2): Error during template compile of ‘BarcodeScanner’
Only initialized variables and constants can be referenced in decorators because the value of this variable is needed by the template compiler in ‘Plugin’
‘Plugin’ references ‘Plugin’
‘Plugin’ is not initialized at @ionic-native\core\decorators\interfaces.ts(100,22).

ionic serve crashes with this error in console:

core.js:1673 ERROR Error: Uncaught (in promise): TypeError: Object(…) is not a function
TypeError: Object(…) is not a function
at index.js:106
at Object…/node_modules/@ionic-native/barcode-scanner/index.js (index.js:155)
at webpack_require (bootstrap:81)
at Object…/src/app/home/home.page.ts (home-home-module.js:262)
at webpack_require (bootstrap:81)
at Object…/src/app/home/home.module.ts (home-home-module.js:190)
at webpack_require (bootstrap:81)
at $_lazy_route_resource lazy namespace object:17
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (core.js:3824)
at index.js:106
at Object…/node_modules/@ionic-native/barcode-scanner/index.js (index.js:155)
at webpack_require (bootstrap:81)
at Object…/src/app/home/home.page.ts (home-home-module.js:262)
at webpack_require (bootstrap:81)
at Object…/src/app/home/home.module.ts (home-home-module.js:190)
at webpack_require (bootstrap:81)
at $_lazy_route_resource lazy namespace object:17
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (core.js:3824)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:3815)
at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push…/node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)

Does the Barcode Scanner work in Ionic 4?

Info:
ionic (Ionic CLI) : 4.1.1 (C:\Users\casey\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.5
@angular-devkit/core : 0.7.5
@angular-devkit/schematics : 0.7.5
@angular/cli : 6.1.5
@ionic/ng-toolkit : 1.0.7
@ionic/schematics-angular : 1.0.5

System:

NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
npm : 5.6.0
OS : Windows

#2

You should add on your app.module

import { BarcodeScanner } from '@ionic-native/barcode-scanner';
providers: [
  BarcodeScanner
]

If it’s a function that is troubling you, please, post the code.

1 Like
#3

Hi RaulGM,

Thanks for the quick response …

It is a compile error, not a runtime error. It happens during ‘ionic build --prod’ (and ionic serve)

The home page was provided above. Here is the app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, RouteReuseStrategy, Routes } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import {BarcodeScanner} from '@ionic-native/barcode-scanner';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    BarcodeScanner,
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

#4

Please, try:
ionic cordova build platform ios —prod
ionic cordova build platform android —prod

#5

I get the same error:

ionic cordova build android --prod

ng run app:ionic-cordova-build:production --platform=android

Date: 2018-08-29T22:41:59.245Z
Hash: 4afa2d6ee6ec92be6014
Time: 9067ms
chunk {cordova} cordova.b8b05ba265b9ff1d69c8.js (cordova) 24.6 kB [rendered]
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.dd83286fc91040d3ea68.css (styles) 16.9 kB [initial] [rendered]
chunk {2} polyfills.207dcc605630215505f5.js (polyfills) 130 bytes [initial] [rendered]
chunk {3} main.f58b96bf9bf614ca37d4.js (main) 128 bytes [initial] [rendered]

ERROR in @ionic-native\barcode-scanner\index.ts(104,2): Error during template compile of ‘BarcodeScanner’
Only initialized variables and constants can be referenced in decorators because the value of this variable is needed by the template compiler in ‘Plugin’
‘Plugin’ references ‘Plugin’
‘Plugin’ is not initialized at @ionic-native\core\decorators\interfaces.ts(100,22).

[ERROR] An error occurred while running subprocess ng.

    ng run app:ionic-cordova-build:production --platform=android exited with exit code 1.
    
    Re-running this command with the --verbose flag may provide more information.

Here is my Ionic Info:

Ionic:

   ionic (Ionic CLI)          : 4.1.1
   Ionic Framework            : @ionic/angular 4.0.0-beta.5
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.7
   @ionic/schematics-angular  : 1.0.5

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.0, (and 3 other plugins)

System:

 (C:\android-sdk)
   NodeJS            : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm               : 5.6.0
   OS                : Windows 7
#6

confirmed that I found same error like @crodgers.

I also found this error from Chrome DevTools’ JavaScript console while running this app on Android:

Uncaught TypeError: Object(...) is not a function
    at vendor.js:64108
    at Object../node_modules/@ionic-native/barcode-scanner/index.js (vendor.js:64157)
    at __webpack_require__ (runtime.js:82)
    at Object../src/app/app.module.ts (main.js:156)
    at __webpack_require__ (runtime.js:82)
    at Object../src/main.ts (main.js:243)
    at __webpack_require__ (runtime.js:82)
    at Object.0 (main.js:265)
    at __webpack_require__ (runtime.js:82)
    at checkDeferredModules (runtime.js:44)

I don’t sure that should barcode scanner plugin do some update like SplashScreen did, according to this issue.

Noted that SplashScreen plugin seems got updated import statement:

import {SplashScreen} from '@ionic-native/splash-screen/ngx';

Ionic info:

Ionic:

   ionic (Ionic CLI)          : 4.1.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.5
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.7
   @ionic/schematics-angular  : 1.0.5

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   Android SDK Tools : 26.1.1 (/Users/teerasejjiraphatchandej/Library/Android/sdk)
   ios-deploy        : 1.9.2
   ios-sim           : 6.1.2
   NodeJS            : v8.11.2 (/usr/local/bin/node)
   npm               : 6.4.0
   OS                : macOS High Sierra
   Xcode             : Xcode 9.4.1 Build version 9F2000
#7

For like the 8th time, Object is not a function -> Ionic 4 Beta: Object(...) is not a function

1 Like
#8

@reedrichards thank you for pointed out. :slight_smile:.

Honestly, I found one of your link and I also found out that we also need to update version of @ionic-native/barcode-scanner to match @ionic/core version.

For anyone who’re encountering with this issue. The installation command on beta (and also in v3) documentation will cause the problem:

npm install --save @ionic-native/barcode-scanner

This will led to version @ionic-native/barcode-scanner: "^4.12.0" in package.json. This leads to the error in this issue.

The command with specified version will give you correct version:

npm install --save @ionic-native/barcode-scanner@5.0.0-beta.15

or you can update package.json from:

// error
"@ionic-native/barcode-scanner": "^4.12.0",
"@ionic-native/core": "5.0.0-beta.15",

to:

// OK
"@ionic-native/barcode-scanner": "5.0.0-beta.15",
"@ionic-native/core": "5.0.0-beta.15",

then run npm i to update module.

The Import statement

According to @reedrichards suggestion. You should update import statement from:

import { BarcodeScanner } from '@ionic-native/barcode-scanner';

to

import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
8 Likes
#9

Thank you, this was the solution!

After updating to ‘barcode-scanner@5.0.0-beta.15’ and updating the import to:

import {BarcodeScanner} from '@ionic-native/barcode-scanner/ngx';

Everything is working nicely.

1 Like
#10

Thank you that fixed app.module.ts error