Can't use the library as an AMD module

[nullquery]

Possibly related: #72

In order to use ZXing I need to import the library using the following statement:

import * as ZXing from "@zxing/library";

const codeReader = new ZXing.BrowserQRCodeReader();

The generated Javascript code (with AMD module generation) looks like this:

define("test", ["require", "exports", "@zxing/library"], function (require, exports, ZXing) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const codeReader = new ZXing.BrowserQRCodeReader();
});

However, the file "library/umd/index.min.js" specifies that the AMD module name is "ZXing" and not "@zxing/library". As a result, my code will compile but not run; the browser gives an error that the module "@zxing/library" cannot be found.

The fix seems easy. I added the following line in the "library/esm5/index.d.ts" at the top:

///<amd-module name='ZXing'/>
export * from './browser/BrowserQRCodeReader';
export * from './browser/BrowserDatamatrixCodeReader';
export * from './browser/BrowserQRCodeSvgWriter';
export * from './browser/BrowserBarcodeReader';
// etc...

The "amd-module" declaration changes the name in the generated Javascript code. It then looks like this:

define("test", ["require", "exports", "ZXing"], function (require, exports, ZXing) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const codeReader = new ZXing.BrowserQRCodeReader();
});
//# sourceMappingURL=compiled.js.map

The code then works fine.

[odahcam]

Probably the fix comes with renaming the following line string:

library/webpack.config.js

Line 56 in bdaebee

library: 'ZXing',

...to '@zxing/library'.

[matthew-socialcore]

Hi,

This commit
6828df4

seems to have broken the library when linked through CDN (nb: not linking in @dev)

<script type="text/javascript" src="https://unpkg.com/@zxing/library"></script>

The module is exported globally as
window["@zxing/library"]
instead of
window.ZXing
as documented

Ref:

It seems unlikely that this was intentional, as this commit went in recently and none of the docs are updated.

[odahcam]

You're right, just checking do you know if this works with AMD?

[matthew-socialcore]

I don't know, sorry. FWIW the solution in #96 (comment)

The fix seems easy. I added the following line in the "library/esm5/index.d.ts" at the top:

sounds like the right approach - so that AMD modules have the correct name, but es5 modules have the correct export.

Disclaimer: I don't know anything about amd modules.

[bbirks]

You're right, just checking do you know if this works with AMD?

I am able to reference https://unpkg.com/@zxing/library@latest today via RequireJS. I can't comment on other AMD-related libraries and platforms, nor other versions of zxing-library.

Note that in RequireJS, it's necessary to use paths configuration to load this module from that URL. In addition, RequireJS likes may append .js to your path URLs. Since https://unpkg.com/@zxing/library@latest.js doesn't exist, this RequireJS behavior may cause issues. The work-arounds I'm aware of are using a RequireJS pluging like noext, or just adding a nonsense query string parameter to the unpkg URL to avoid the extension.

Example working configuration:

require.config({
	paths: {
		'ZXing': 'https://unpkg.com/@zxing/library@latest?noext'
	}
});

// zxing-library is then available by requiring "ZXing"
require(['ZXing'], function (ZXing) { /* ... */ });
define(['ZXing'], function (ZXing) { /* ... */ });

[github-actions]

Stale issue message