Ngx-scanner: Version 3.1.1 sets device then immediately sets it to undefined when built with angular cli with --prod flag.

[pette9]

After running ng serve. The device is set and the scanner works as expected, but the following warning is logged on console:
Setting the same device is not allowed.

After running ng build --prod. The same error is logged but the device is set and immediately after set to undefined. It shows the camera video window for a second or less and it disappears.

To reproduce: clone the demo app, run ng build --prod and start scanner

The expected behaviour should be, even if setting similar device, it should behave like it does on dev environment when you build for production environment

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Ubuntu
• Browser: chrome
• Version 86

Smartphone (please complete the following information):

• Device: android
• OS: android
• Browser chrome
• Version 86

Additional context
I don't know why it alters the already set device in production mode and not in dev mode.

[kzay]

same here

[odahcam]

I'm currently investigating this right now. I forgot to test the component with Ivy enabled and guess what: lots of bugs happened with Ivy. Just to clarify one thing, the "Setting the same device is not allowed." has nothing to do with the actual problem, it is in fact a mechanism to prevent that kind of errors, also as is "Trying to play video that is already playing".

I'll keep you posted on updates regarding this, but I expect to fix this tonight.

[odahcam]

It seems the error is caused by some optimisation in Angular build pipeline that vanishes the ZXing error Exception classes's names making it impossible to the scanner to know what error is being thrown thus throwing an error directly into the outer-most catch in the component making that it resets the entire component as a mechanism of defense against runtime breaking errors.

As you can see, the error name becomes 'e':

[odahcam]

I disabled optimisation, so it works now. Still couldn't solve the issue where stream doesn't gets stopped after switching devices.

[szucsnandor]

I have the same problem where the camera feed turns on for a split second then vanishes. Also I did not have the warning messages in the console about setting the same device until i tried to enforce to use the back camera.

[szucsnandor]

Serving the app localy and opening it from a laptop is fine, it opens the webcamera stream but prod build from a mobile phone is not working. I tried angular 10.1.(4-5-6)
below is the remote debug i see from a prod build.

[pette9]

I disabled optimisation, so it works now. Still couldn't solve the issue where stream doesn't gets stopped after switching devices.

Disabling build optimization on a medium to large application increases the main bundle to unacceptable sizes. Version 3.0.1 is able to start the camera and the video with optimizations on for angular 10.2.0. May there be any other fix that do not involve disabling build optimization?

[odahcam]

@szucsnandor I have the same problem where the camera feed turns on for a split second then vanishes.

That happens when the scanner is asking for permissions.

@pette9 Version 3.0.1 is able to start the camera and the video with optimizations on for angular 10.2.0.

The current version can as well, but it can't check for the ~hot damn~ exceptions the Library throws while decoding, so disabling the optimisation was the only fix I could find for now.

@pette9 May there be any other fix that do not involve disabling build optimization?

I hope so.

---

I've just published a new version now that has these fixes and the demo has optimisation turned off. I do not have a fix for that now as instanceof simply does not works anymore and Exception::name always returns "e" in prod mode. There's too many things to explore and I simply can't work anymore on this project since I gave so much time to it (past 12 days working full-time or even more). That's what I can do for now guys.

[pette9]

@szucsnandor I have the same problem where the camera feed turns on for a split second then vanishes.

That happens when the scanner is asking for permissions.

@pette9 Version 3.0.1 is able to start the camera and the video with optimizations on for angular 10.2.0.

The current version can as well, but it can't check for the ~hot damn~ exceptions the Library throws while decoding, so disabling the optimisation was the only fix I could find for now.

@pette9 May there be any other fix that do not involve disabling build optimization?

I hope so.

I've just published a new version now that has these fixes and the demo has optimisation turned off. I do not have a fix for that now as instanceof simply does not works anymore and Exception::name always returns "e" in prod mode. There's too many things to explore and I simply can't work anymore on this project since I gave so much time to it (past 12 days working full-time or even more). That's what I can do for now guys.

@szucsnandor I have the same problem where the camera feed turns on for a split second then vanishes.

That happens when the scanner is asking for permissions.

@pette9 Version 3.0.1 is able to start the camera and the video with optimizations on for angular 10.2.0.

The current version can as well, but it can't check for the ~hot damn~ exceptions the Library throws while decoding, so disabling the optimisation was the only fix I could find for now.

@pette9 May there be any other fix that do not involve disabling build optimization?

I hope so.

I've just published a new version now that has these fixes and the demo has optimisation turned off. I do not have a fix for that now as instanceof simply does not works anymore and Exception::name always returns "e" in prod mode. There's too many things to explore and I simply can't work anymore on this project since I gave so much time to it (past 12 days working full-time or even more). That's what I can do for now guys.

I'm not sure whether it would be a good Idea, but would checking the exception message instead of the name or instanceof solve the issue? From the screenshot you posted, the build pipeline seems to have maintained the exception message as it can be seen on the console.

[JoshuvaGeorge03]

@odahcam Could you please tell me what kind of optimizations are disabled?

[odahcam]

would checking the exception message instead of the name or instanceof solve the issue?

Believe me, I tried that, but only one of the exceptions has a message.

I gave up when I added a new property just to keep the exception name in a string and this property doesn't exist (????) when coming from the exception from browser layer. That makes no sense, both nix-scanner and browser are using the same library, they use it as a peer dependency. I'm sure this is some very simple and stupid configuration but it just makes no sense for me right now and I can't afford to spend more time in it this month.

[sunsocool]

This package has been deprecated
Author message:
Too many bugs, not usable. # Use v3.0.0 instead.

from https://www.npmjs.com/package/@zxing/ngx-scanner/v/3.1.2

[pette9]

would checking the exception message instead of the name or instanceof solve the issue?

Believe me, I tried that, but only one of the exceptions has a message.

I gave up when I added a new property just to keep the exception name in a string and this property doesn't exist (????) when coming from the exception from browser layer. That makes no sense, both nix-scanner and browser are using the same library, they use it as a peer dependency. I'm sure this is some very simple and stupid configuration but it just makes no sense for me right now and I can't afford to spend more time in it this month.

@odahcam I agree it's probably a configuration error specific to your environment. I have vendored the master branch of the scanner into my application and the problem of resetting the entire component when built with optimization enabled seems to have disappeared. I now get a constant camera stream but I have ReferenceError: Cannot access 'n' before initialization error logged in the console which means I cannot scan barcodes yet.

[pette9]

would checking the exception message instead of the name or instanceof solve the issue?

Believe me, I tried that, but only one of the exceptions has a message.
I gave up when I added a new property just to keep the exception name in a string and this property doesn't exist (????) when coming from the exception from browser layer. That makes no sense, both nix-scanner and browser are using the same library, they use it as a peer dependency. I'm sure this is some very simple and stupid configuration but it just makes no sense for me right now and I can't afford to spend more time in it this month.

@odahcam I agree it's probably a configuration error specific to your environment. I have vendored the master branch of the scanner into my application and the problem of resetting the entire component when built with optimization enabled seems to have disappeared. I now get a constant camera stream but I have ReferenceError: Cannot access 'n' before initialization error logged in the console which means I cannot scan barcodes yet.

UPDATE
I have managed to make the vendored scanner work with angular 10.2.0 optimization on --prod build. @odahcam checking the exception message did work. I expected to hit a wall if I encountered an exception without a message but I didn't. I only encountered the error you encountered on the screenshot above. If it is possible to have the library throw error messages for all expected errors, they could be used when error.name, or instanceof fails. Earlier update that there might be a configuration error specific to your environment was wrong. I ended up encountering similar errors. I also encountered https://github.com/zxing-js/ngx-scanner/issues/361#issue-732294323 which was a bug on scanFromDeviceObservable function using controls.stop() before controls is initialized. Changing this to this.scannerControls?.stop(); fixed the issue.

[odahcam]

Earlier update that there might be a configuration error specific to your environment was wrong.

Yeah I might set this environment on fire if I try it again, hehe.

Changing this to this.scannerControls?.stop(); fixed the issue.

Yep, I can confirm this as I did it too, but didn't got to publish as I can't make it work in time so I just deprecated the whole 3.1.x update.

Edit:

I forgot to comment on the rest but I sure hope it was a problem with my environment it just seems to make no sense as I had only one install of zxing/library in my node_modules so it doesn't makes any sense for me that two different instances are being created by both zxing/browser and this angular scanner since they're using the same Library. Anyways, the work is here, if anyone can take the time to check the module dependencies and installations in order to find clues about this I will be very happy, and for sure others will too.

Last but not least, the last idea I had about this is that somehow Angular compiler and zxing/browser are using different variations of the zxing/library builds, like, maybe, Angular is using the es2015 distributed files but when zxing/browser gets transpiled the transpiler maybe ends up using the cjs files. That's something to look for as well as till this moment I didn't think of a way to test or check that.

[joelmeaders]

I'm attempting to work on this locally.

Removing line 523 (await this.autostartScanner([...devices]);) from zxing-scanner-component seems to solve everything in the demo app. Why not make autoStartScanner([...]) public and leave it up to the consuming app to call it after everything is initialized?

[SantiLuna]

would checking the exception message instead of the name or instanceof solve the issue?

Believe me, I tried that, but only one of the exceptions has a message.
I gave up when I added a new property just to keep the exception name in a string and this property doesn't exist (????) when coming from the exception from browser layer. That makes no sense, both nix-scanner and browser are using the same library, they use it as a peer dependency. I'm sure this is some very simple and stupid configuration but it just makes no sense for me right now and I can't afford to spend more time in it this month.

@odahcam I agree it's probably a configuration error specific to your environment. I have vendored the master branch of the scanner into my application and the problem of resetting the entire component when built with optimization enabled seems to have disappeared. I now get a constant camera stream but I have ReferenceError: Cannot access 'n' before initialization error logged in the console which means I cannot scan barcodes yet.

UPDATE
I have managed to make the vendored scanner work with angular 10.2.0 optimization on --prod build. @odahcam checking the exception message did work. I expected to hit a wall if I encountered an exception without a message but I didn't. I only encountered the error you encountered on the screenshot above. If it is possible to have the library throw error messages for all expected errors, they could be used when error.name, or instanceof fails. Earlier update that there might be a configuration error specific to your environment was wrong. I ended up encountering similar errors. I also encountered #361 (comment) which was a bug on scanFromDeviceObservable function using controls.stop() before controls is initialized. Changing this to this.scannerControls?.stop(); fixed the issue.

Could you give us more information about your latest update? Maybe a sample code?
Version 3.0.* has significant performance issues for us so it is not an alternative. We are trying to get 3.1.2 to work but we are running into the same issues that you discussed here.

[pette9]

would checking the exception message instead of the name or instanceof solve the issue?

Believe me, I tried that, but only one of the exceptions has a message.
I gave up when I added a new property just to keep the exception name in a string and this property doesn't exist (????) when coming from the exception from browser layer. That makes no sense, both nix-scanner and browser are using the same library, they use it as a peer dependency. I'm sure this is some very simple and stupid configuration but it just makes no sense for me right now and I can't afford to spend more time in it this month.

@odahcam I agree it's probably a configuration error specific to your environment. I have vendored the master branch of the scanner into my application and the problem of resetting the entire component when built with optimization enabled seems to have disappeared. I now get a constant camera stream but I have ReferenceError: Cannot access 'n' before initialization error logged in the console which means I cannot scan barcodes yet.

UPDATE
I have managed to make the vendored scanner work with angular 10.2.0 optimization on --prod build. @odahcam checking the exception message did work. I expected to hit a wall if I encountered an exception without a message but I didn't. I only encountered the error you encountered on the screenshot above. If it is possible to have the library throw error messages for all expected errors, they could be used when error.name, or instanceof fails. Earlier update that there might be a configuration error specific to your environment was wrong. I ended up encountering similar errors. I also encountered #361 (comment) which was a bug on scanFromDeviceObservable function using controls.stop() before controls is initialized. Changing this to this.scannerControls?.stop(); fixed the issue.

Could you give us more information about your latest update? Maybe a sample code?
Version 3.0.* has significant performance issues for us so it is not an alternative. We are trying to get 3.1.2 to work but we are running into the same issues that you discussed here.

When you try to build the master branch with --prod flag and build optimization enabled, the js produced by ivy build pipeline breaks some things. I don't know the root cause of this but @odahcam has intimated it may be that "Angular compiler and zxing/browser are using different variations of the zxing/library builds".

I have vendored the scanner locally and I encountered three of the things that ivy breaks in the scanner. All three are in the browser-multi-format-continuous-reader.ts file.

1. The built js has a conflict in variable naming so you encounter ReferenceError: Cannot access 'n' before initialization to solve this I changed controls variable name on line 41 of browser-multi-format-continuous-reader.ts file to ctrls now the file from line 38 looks like this:

     const scan$ = new BehaviorSubject<ResultAndError>({});
     let ctrls;
   
     try {
     ctrls = await this.decodeFromVideoDevice(deviceId, previewEl, (result, error) => {
      ...
   

2. I encountered #361 (comment) Cannot read property 'stop' of undefined which was caused by using controls.stop() before controls is initialized on line 64 of the same file. Changing this to this.scannerControls.stop() fixed this issue.

3. The third thing that ivy broke was that it stripped away the class names for the errors that are checked from line 51 to 60 of the file above:

     if (
       // scan Failure - found nothing, no error
       errorName === NotFoundException.name ||
       // scan Error - found the QR but got error on decoding
       errorName === ChecksumException.name ||
       errorName === FormatException.name
    ) {
       scan$.next({ error });
       return;
    }
   

   These class names are defined on zxing/library. For some reason these class names are all renamed to e after --prod build which means that they are always handled as fatal errors and therefore the scanner stops. @odahcam tried to add a kind property on the library to do the error checking on the scanner but this was stripped away too. Luckily the most frequent Exception of the three, NotFoundException which is thrown when a barcode is not found on the stream has an error message that survives the build pipeline. When you check for this by adding || error.message.includes('No MultiFormat Readers were able to detect the code.') on the if conditions above. The scanner works properly. I can confirm that with these ugly fixes the scanner works with the latest angular version 11.0.0. These are not permanent fixes as you can see 1 and 3 do not address the root cause of why this is happening and 3 doesn't check for the other two non-fatal errors since the library do not throw the error message for them. That said I've been working with these fixes with acceptable degree of success on the latest angular version with optimization enabled with cli --prod build.

[SergioGMB]

Is there an estimated time for the resolution of this issue? Thanks

[georges-honore-figfi]

Hi,
Sorry if this just a repeat of the issue above. I am trying to port an Angular app to v10.
My QR Code reader is working fine in my development environment (MacOS), but has stopped working in the production build.
(I tried v11 and that shows the same problem).

Chrome Inspector reports:
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'stop' of undefined
TypeError: Cannot read property 'stop' of undefined

If possible, please can you confirm that this is the same issue.

Thank you for this package and your time
Georges

[odahcam]

@pette9 would you mind openning a PR?

[pette9]

@pette9 would you mind openning a PR?

@odahcam done

[fitness23]

I had same issue. Rolling back to release 3.0.1 = npm install @zxing/[email protected] fixes it and seems to work fine with Angular 11. Of course this is a temporary measure.