Ngx-scanner: Crashing entire app on IE and Edge

[devgrigor]

Describe the bug
When project is opened in IE11 or Edge it's freezing on loading page. The error is at eval('BrowserCodeReader ...') It happens only if ZXingScannerModule.forRoot() was called. There is n way to even put a try catch there, because eval is happening in vendor, and even conditionally calling forRoot() is causing the issue e.g.

if(!isIEorEdge) {
      imports.push(ZXingScannerModule.forRoot())
}

To Reproduce
Steps to reproduce the behavior:

1. Open project with plugin in IE11 or Edge

Expected behavior
Throw an error that can be handled or show warning.

Desktop (please complete the following information):

• OS: Windows
• Browser IE-11 and Edge
• Version any

Smartphone (please complete the following information):

• Probably windows phone will cause the same, not tested

Additional context
I know that this plugin is not supporting Edge and IE, but issue is not about support it's about crashing entire app.

[odahcam]

Have you tryied w/o .forRoot()?

[devgrigor]

Not before you mentioned it, now I did and still same error. I guess it's the import not the forRoot() that matters

[odahcam]

Are you using Angular 6?

[devgrigor]

No. Angular 5.2

[odahcam]

Whats the scanner version?

[devgrigor]

1.1.0-dev06cf75

[odahcam]

Could you update to the latest version ans try again?

[werthdavid]

There is a (known) issue with IE11 in zxing-library but Edge should be working.. I can take a look tmrw

[devgrigor]

I'll try to update, but I thought this is the latest version, installed about 2-3 weeks ago. @werthdavid Edge is not working as well

[odahcam]

No problem, at this moment LTS is npm i -S @zxing/[email protected]

[devgrigor]

ok. Installed LTS, but issue still occurs

[odahcam]

Here Edge looks fine and IE is throwing this error:

if (typeof iterFn != 'function') throw TypeError(iterable + ' is not iterable!');

At line 14 of _for-of.js with the following description:

SCRIPT5022: Exception thrown and not caught

[odahcam]

I think the component is trying to iterate the devices w/o devices.

[devgrigor]

I'm not sure that this is the error I'm getting. My error comes from eval of 'class BrowserCodeReader' probably es6 issue, but I included all polyfills of angular and still got error. I'll try to reproduce same issue on new angular project to be more accurate in report

[odahcam]

Check your tsconfig and look for your build targets, maybe you are building your app for modern JS only. The component shouldn't break your app at Edge at least, IE does have a problem.

[devgrigor]

Thanks for advice. Rechecked, it is es5, so this can't be the case, if it built for modern browsers only all other components would cause the same issue, but it occurs only if I import the plugin.

[devgrigor]

Small note in my vendor I see usage of
"../../../../@zxing/library/esm5/browser/BrowserCodeReader.js"
which is in es6 format e.g. starts with class BrowserCodeReader

[odahcam]

Dunno if it's bad or good, but it could be a problem with the library at all. Do you re-checked Edge? It seems to be working here, I'm curious about this different behavior. 🤔

[devgrigor]

Yes rechecked Edge version 20 it throws error in main.bundle.js at this code e.default = class{etc.} I actually found the ngx-scanner/esm5/zxing-ngx-scanner.js that contains correct classes like BrowserCodeReader in es5 standard. I just don't understand why it's not working with that file

[odahcam]

I can confirm that esm5 are es6 classes; ~damn~

I think this issue should be transfered to @zxing-js/library, what you think @werthdavid ?

[odahcam]

Also, I noticed that zxing-ngx-scanner.js is using ES6 imports syntax while in ES5 files, this is so wrong. 👀

[Danieliverant]

any news on that?

[odahcam]

I published a dev version so the reporter could test if it solved his case, but I didn't get any feedback on that. I'm not supporting IE currently, so I would be glad if anyone test it, cause I won't test any soon because of my current project environment.

But we made some progress with the scanner issues and we certainty gonna solve it by next month btw.

[devgrigor]

I tested 1.1.1-dev.ca33ea version and it worked on IE. Thanks for that. @Danieliverant just don't forget to add import 'core-js/es6/typed'; at polyfills

[Danieliverant]

@odahcam @devgrigor is there an NPM package with this dev version?

[devgrigor]

@Danieliverant https://www.npmjs.com/package/@zxing/ngx-scanner/v/1.1.1-dev.ca33ea

[odahcam]

# this specific version
npm i -S @zxing/[email protected]

# latest dev version
npm i -S @zxing/ngx-scanner@dev

[Danieliverant]

Thank you!! I will test it on Monday

[ninjaonsafari]

@odahcam there is still some es6 thingy left in the GlobalHistogramBinarizer.

This is my version 1.2.0-dev.9e43af of the scanner.
also with the version 1.1.1-dev.ca33ea

[odahcam]

Shouldn't a polyfill cover'em?

[odahcam]

Oh, I see that it's from the library package, can we discuss that there (https://github.com/zxing-js/library/issues/7)?

[ninjaonsafari]

oh gah damn...
Sorry this one's mine...
I thought I had all polyfills in place but i forgot core-js/es6/typed

[odahcam]

Everyone makes mistakes, even ninjas. 🐱‍👤 _(ninjacat Windows's emoji)_

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.