1

I have a rails project with webpacker, I was using "@zxing/library": "^0.17.1" for scanning barcode but as they have released a new library "@zxing/browser" so I am trying to upgrade to it. So I have added this to package.json:

        "@zxing/browser": "^0.0.5",
        "@zxing/library": "^0.18.3",

and trying to use it like this in a js file:

import { BrowserMultiFormatReader } from "@zxing/browser";
var a = new BrowserMultiFormatReader();

But when webpacker compiles it there is an error in terminal console:

ERROR in ./app/assets_js/xyz.js 2:12-36
"export 'BrowserMultiFormatReader' was not found in '@zxing/browser'

and on browser console it shows this:

Uncaught TypeError: _zxing_browser__WEBPACK_IMPORTED_MODULE_0__.BrowserMultiFormatReader is not a constructor

The library was working previously on 0.17.1 version where it has the similar files not sure what I have done wrong here.

I have tried default import but that didn't work. I tried adding ts-loader or the babel-typescript library but that too didn't work. And actually as it worked previously I think it is not required to add any new library to transpile the library code.

Library:

In vscode if I ctrl + click the import (@zxing/browser) then I get this code in the index.d.ts

export { BarcodeFormat } from '@zxing/library';
export * from './common/HTMLCanvasElementLuminanceSource';
export * from './common/HTMLVisualMediaElement';
export * from './common/IScannerControls';
export * from './readers/BrowserAztecCodeReader';
export * from './readers/BrowserMultiFormatOneDReader';
export * from './readers/BrowserCodeReader';
export * from './readers/BrowserDatamatrixCodeReader';
export * from './readers/BrowserMultiFormatReader';
export * from './readers/BrowserPDF417Reader';
export * from './readers/BrowserQRCodeReader';
export * from './readers/IBrowserCodeReaderOptions';
export * from './writers/BrowserCodeSvgWriter';
export * from './writers/BrowserQRCodeSvgWriter';

and this is the code in @zxing/browser/esm/readers/BrowserMultiFormatReader.d.ts file:

import { BarcodeFormat, BinaryBitmap, DecodeHintType, MultiFormatReader, Result } from '@zxing/library';
import { BrowserCodeReader } from './BrowserCodeReader';
import { IBrowserCodeReaderOptions } from './IBrowserCodeReaderOptions';
export declare class BrowserMultiFormatReader extends BrowserCodeReader {
    set possibleFormats(formats: BarcodeFormat[]);
    protected readonly reader: MultiFormatReader;
    constructor(hints?: Map<DecodeHintType, any>, options?: IBrowserCodeReaderOptions);
    /**
     * Overwrite decodeBitmap to call decodeWithState, which will pay
     * attention to the hints set in the constructor function
     */
    decodeBitmap(binaryBitmap: BinaryBitmap): Result;
    /**
     * Allows to change hints in runtime.
     */
    setHints(hints: Map<DecodeHintType, any>): void;
}

If this helps somehow to point my mistake.

user14899129
  • 11
  • 4

1 Answers1

0

Try to import from '@zxing/library/esm' instead of '@zxing/library/' You can also try '@zxing/library/es2015'

I had the same problem, working fine with 0.17.1 but breaking when update to 0.18+, and those changes both fixed my problem. I decided to keep the es2015 one since it seems more modern to me. I think they introduced this breaking change in 0.18+ without referencing it in the docs.

I don't use @zxing/browser, but I guess you could try the same with that library as well.

Peepoodo
  • 1
  • 1