Cordobo / angularx-qrcode

A fast and easy-to-use Angular QR Code Generator library with Ivy support
https://cordobo.github.io/angularx-qrcode/
MIT License
459 stars 125 forks source link

qrcode types missing #227

Closed sam-s4s closed 7 months ago

sam-s4s commented 10 months ago

I apologise, but it looks like my fix has broken it in a strange way. Obviously I'm missing something.

This types/node problem is the gift that keeps on giving, isn't it...

Error: node_modules/angularx-qrcode/lib/angularx-qrcode.component.d.ts:3:44 - error TS7016: Could not find a declaration file for module 'qrcode'. 'C:/blah/node_modules/qrcode/lib/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/qrcode` if it exists or add a new declaration (.d.ts) file containing `declare module 'qrcode';`

3 import { QRCodeErrorCorrectionLevel } from "qrcode";
                                             ~~~~~~~~

Error: node_modules/angularx-qrcode/lib/types.d.ts:1:44 - error TS7016: Could not find a declaration file for module 'qrcode'. 'C:/blah/node_modules/qrcode/lib/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/qrcode` if it exists or add a new declaration (.d.ts) file containing `declare module 'qrcode';`

1 import { QRCodeErrorCorrectionLevel } from "qrcode";
                                             ~~~~~~~~

Now the types/qrcode package is not being included in node_modules, which has solved the problem over the NodeJS.Timer for setTimeout, etc. so that's good...

But because angularx-qrcode.component.d.ts and types.d.ts are trying to use QRCodeErrorCorrectionLevel, which comes from qrcode (which imports the bad types/node) - it seems we are running into a problem.

I'm not sure what the solution is here... the first thing that comes to mind, though, is... could we just not export anything in the angularx-qrcode that uses anything from qrcode? ie. have a local copy of QRCodeErrorCorrectionLevel in types.d.ts, like we do for QRCodeElementType and QRCodeVersion ?

Or another possible solution... because the @types/qrcode package is clearly made for a nodejs environment and not a browser environment (unlike angularx-qrcode, which is of course browser-based) - maybe it could be best to just avoid using it entirely? (ie. don't even pull @types/qrcode anywhere and just use it without typing?)

Sounds counter-intuitive, and I've never needed to do that before, but it's clear from looking at @types/qrcode that is was never meant to be used for browser :(

Again, apologies for my solution not working.

Helveg commented 10 months ago

I encounter the same problem. Unless this project has previously solved this issue in another way and this is a regression, the solution is to add @types/qrcode to the dependencies of the package. See these docs:

If your type definitions depend on another package:

  • Don’t combine it with yours, keep each in their own file.
  • Don’t copy the declarations in your package either.
  • Do depend on the npm type declaration package if it doesn’t package its declaration files.

I can confirm that the problem is alleviated by installing @types/qrcode manually into the repository. Another solution is to push upstream in the qrcode repository for type declarations.

Helveg commented 10 months ago

@Cordobo it seems you introduced the problematic import here:

https://github.com/Cordobo/angularx-qrcode/commit/f8cfca07937e7affe2dc74458105506233bdb770#diff-6efeb325dce554db76d30789045f7bfac91660cb8fa01ff66ad368398bc7f715

sam-s4s commented 10 months ago

Yes indeed it seems like QRCodeErrorCorrectionLevel is the only thing that requires it.

Given the type library for qrcode is actually for the nodejs environment (not the web/browser) I hope we can avoid using it, as it contaminates the browser environment.

Helveg commented 10 months ago

@sam-s4s, I don't see your problem with the qrcode library. It works perfectly fine in the browser, please see the docs: https://www.npmjs.com/package/qrcode under Installation > Browser.

The problem here is that the package doesn't provide its own typings, and if you import the types in this package, then this package has to list the typing package @types/qrcode as a dependency, not as a devDependency.

sam-s4s commented 9 months ago

@sam-s4s, I don't see your problem with the qrcode library. It works perfectly fine in the browser, please see the docs: https://www.npmjs.com/package/qrcode under Installation > Browser.

The problem here is that the package doesn't provide its own typings, and if you import the types in this package, then this package has to list the typing package @types/qrcode as a dependency, not as a devDependency.

Yes, it works fine, but the types are incorrect - that type library is for use in nodejs, not browser.

For example, the node types override the browser types in the IDE, so settimeout reutrns NodeJS.Timer, instead of number, which is incorrect.

For more information, see previous issue #211

ywei390 commented 7 months ago

Hi, is this issue resolved? or is there any solution?

Cordobo commented 7 months ago

Fixed in version 17