Ionic 4 Barcode Scanner Plugin Compile Error

crodgers · August 29, 2018, 9:29pm

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

ionic start junk blank --type=angular
npm install @ionic-native/barcode-scanner
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

RaulGM · August 29, 2018, 9:38pm

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.

crodgers · August 29, 2018, 9:57pm

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 {}

RaulGM · August 29, 2018, 10:12pm

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

crodgers · August 29, 2018, 10:42pm

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

teerasej · August 30, 2018, 2:30pm

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

reedrichards · August 30, 2018, 3:19pm

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

teerasej · August 30, 2018, 4:18pm

@reedrichards thank you for pointed out. .

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';

crodgers · September 3, 2018, 3:59pm

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.

makarchus · March 20, 2019, 5:35pm

Thank you that fixed app.module.ts error

Topic		Replies	Views
I have a compilation error in android studio, Barcode Scanner Capacitor	2	3027	November 21, 2022
Issue with the BarcodeScanner plugin ionic-v3	0	670	January 24, 2019
Ionic Native Barcode Scanner "Property 'scan' does not exist on type 'BarcodeScanner' Ionic Native	2	2918	September 1, 2017
Ionic native (csZBar) problem whit Ionic v4 Ionic Framework	3	1237	July 19, 2021
Barcode Scanner was giving a run time error ionic-v3	3	981	July 24, 2019

Ionic 4 Barcode Scanner Plugin Compile Error

Related topics