1

I’m trying to use a TypeScript library (zxing-typescript in particular).

My typescript file begins with:

import * as ZXing from '../../lib/@zxing/library'
// Also happens when importing from '../../lib/@zxing/library/esm' and '../../lib/@zxing/library/esm/index'

The resulting JavaScript file contains the import verbatim. In all cases, TypeScript is correctly finding ../../lib/@zxing/library/esm/index.d.ts and giving me proper completion and compile errors, but running the resulting JavaScript from the latest Chrome Version 80.0.3987.132 (Official Build) (64-bit), I get a 404 looking for a file named library.

Things get a little better if I begin the TypeScript file with:

import * as ZXing from '../../lib/@zxing/library/esm/index.js'

but index.js contains lines such as

export * from './browser/BrowserBarcodeReader';

referring to ./browser/BrowserBarcodeReader.js. Again, if I go into the library and edit index.js to include the extension, the situation continues to improve, but many of the dependencies have dependencies of their own and I get similar issues.

How were index.js and index.d.ts meant to be used?

(Hopefully this question isn’t a duplicate of Does ES6 import/export need ".js" extension?, as I can’t imagine plan A is to change the server settings to check for JS files).

EDIT: The library "@zxing/library@0.15.2" is getting pulled from jsdelivr (one of the package managers suggested by Visual Studio 2019's libman), but I tried looking into some other forms of the zxing library.

The one suggested by this link gave C++ errors when installing dependencies (npm install) and TypeScript errors when compiling (tsc) related to some of the @types (I recognized Chai and was surprised such a big name library was giving errors).

Were successfully using zxing with straight JavaScript by including UMD/index.min.js, the name suggesting the UMD module works fine. There's no typescript definitions in the UMD directory, but maybe there's a way to have TypeScript figure some of the module information out from that JavaScript file.

I'm new to a lot of this, so user error isn't out of the question.

Any further guidance would be appreciated, but I mainly wanted to thank everyone for their help and let you know I did try your suggestions.

Michael Buchoff
  • 65
  • 1
  • 6
  • 1
    Make sure you're using a stable version of the library from a trusted source. This can happen if the typings (`index.d.ts`) do not reflect what the library is doing and exporting properly. Look at https://github.com/aleris/zxing-typescript – Marco Scabbiolo Mar 12 '20 at 13:36
  • 1
    No, plan A is not to reconfigure the server, but to reconfigure your typescript compiler and/or module bundler to emit imports with file extensions - if you want to use ES6 modules on the client at all. – Bergi Mar 12 '20 at 13:51
  • Thanks for the suggestions. I tried them and appended the question with results. – Michael Buchoff Mar 13 '20 at 13:05

0 Answers0