ngx-scanner: "MediaDeviceInfo is not defined" on secure server

Bug When trying to serve on our secure (HTTPS & SSL ready) test environment we’re getting the following errors:

/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:431535
        Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:type", MediaDeviceInfo),
                                                                                ^

ReferenceError: MediaDeviceInfo is not defined
    at /Users/thisisme/Documents/Brand/Client/Project/dist/server.js:431535:81
    at Module.Object.defineProperty.value (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:431572:2)
    at __webpack_require__ (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:20:30)
    at Object.@zxing/ngx-scanner (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:310014:18)
    at __webpack_require__ (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:256388:30)
    at Object../node_modules/@zxing/ngx-scanner/zxing-ngx-scanner.ngfactory.js (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:264790:10)
    at __webpack_require__ (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:256388:30)
    at Object../src/app/barcode-scanner/barcode-scanner.component.ngfactory.js (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:296178:10)
    at __webpack_require__ (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:256388:30)
    at Object../src/app/quick-order/quick-order.component.ngfactory.js (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:305426:10)
    at __webpack_require__ (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:256388:30)
    at Object../src/app/app.server.module.ngfactory.js (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:295997:11)
    at __webpack_require__ (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:256388:30)
    at Object../src/main.server.ts (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:309469:37)
    at __webpack_require__ (/Users/thisisme/Documents/Brand/Client/Project/dist/server.js:256388:30)

The outcome of this, is that it won’t load the webpage at all (can’t handle request).

To Reproduce We’re running our pipelines via Azure, the projects gets pre-build with the right environment credentials, then deployed to our secure environment. I get that this is a little hard to reproduce, but upon reviewing this bug I came across one argument/solution; “Server is not secure, make sure it is”. So I’m kinda out of options as far as online research goes.

Expected behavior A working barcode scanner 🎉

Additional context As I said our building approach is a little bit different/complex than most. But I hope we can come up with a solution.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 2
Comments: 21 (5 by maintainers)

Most upvoted comments

We are running into the same issue. The app would be able to run a SSR build if we just import the module without declaring the ZXingScannerComponent.

Once we use ZXingScannerComponent the build crashes with the same error. As we used ZXingScannerComponent for typing of the ViewChild only, we switched it to any and the build would complete successfully.

mt-webdev on Mar 10, 2020

Understood, so you can’t always run something on server-side and expect browser APIs to be available, even in Angular SSR you must avoid running some pieces of code and, for that, you can use the isPlatformBrowser or isPlatformServer built-in funcions. I still a little confused about why this happened to you, if I found something I will update this issue’s status.

odahcam on Mar 4, 2020

Hi @royvanderwesten,

I am also facing same issue, but trying to serve on insecure test environment. Have you found any solution?

Thanks, Sudhakar.

You should be able to serve on a secure test environment. And no, I haven’t found a solution yet for my case.

royvanderwesten on Feb 27, 2020