Cannot Run on iOS 15.5

[kueiapp]

Describe the bug
When coding a Vue3 project with npm version vue-qrcode-reader from v4.0.0 to v5.3.0, it shows unhandled errors on dev-tool console as activating camera from iOS Safari 15.5.

Therefore, to despite the coding issues, we tried to use the device with the iOS version installed to run demo page, it shows the 2 runtime errors below when activate device camera and granted permission on browser dev-tool console.

1. when activating the camera:

[Error] SyntaxError: Invalid regular expression: invalid group specifier name
RegExp
locateFile — index.cf60a0d7.js:1:3531

(anonymous function) — index.cf60a0d7.js:1:7090
Or — index.cf60a0d7.js:1:3952
Et — index.cf60a0d7.js:3:43457
yr — index.cf60a0d7.js:3:44976
(anonymous function) — index.cf60a0d7.js:3:64980
Ve — framework.ffe7611b.js:1:13586
we — framework.ffe7611b.js:1:13665
(anonymous function) — framework.ffe7611b.js:1:25237
hn — framework.ffe7611b.js:1:14956
Zr — framework.ffe7611b.js:1:15265
Zr — framework.ffe7611b.js:1:15308
promiseReactionJob

	ko (framework.ffe7611b.js:1:14095)
	kt (framework.ffe7611b.js:1:14048)
	Ve (framework.ffe7611b.js:1:13608)
	we (framework.ffe7611b.js:1:13665)
	(anonymous function) (framework.ffe7611b.js:1:25237)
	hn (framework.ffe7611b.js:1:14956)
	Zr (framework.ffe7611b.js:1:15265)
	Zr (framework.ffe7611b.js:1:15308)
	promiseReactionJob

and

2. granted the permission:

Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'xr.detect')
asyncFunctionResume

The error [Error] SyntaxError: Invalid regular expression: invalid group specifier name RegExp is not related to qr-code scanned or not. When the page gets opened and prompts permission box, the error jumps in console logs. It seems not about the scanning funtionality.

To Reproduce

1. Connects a iPhone to MacBook and allows inspect mode for debugging
2. Use the device to open the demo page
3. Open Safari dev-tool from menu Develop on MacBook by selecting the device page
4. Go back to the device and reload the page
5. The error logs would show on the dev-tool console

Screenshots

Smartphone (please complete the following information):

• Device: iPhone SE3, iPhone 7
• OS: iOS 15.5
• Browser Safari

[Sec-ant]

The locateFile is a function from zxing-wasm which is an indirect dependency of vue-qrcode-reader. The cause of this error is the lookbehind regex in this line of code, as safari only starts supporting lookbehind from 16.4:

const subDir = path.match(/(?<=_).+?(?=\.wasm$)/)?.[0];

I'm the author of the zxing-wasm library, I can fix this compatibility issue by changing the regular expression. Meanwhile there seems no good way to work around this problem.

[Sec-ant]

An addendum for @gruhn :

There are already some minor and patch version updates in @sec-ant/barcode-detector from v1.1.2, which is the version vue-qrcode-reader is currently dependent on, e.g. I changed the file structure of the package entry points and some fields in the package.json.

As vue-qrcode-reader is almost the only and biggest downstream dependent of my package, I'd love to do some tests on it to not break things before releasing new versions of my package. I also want to contribute some perf optimizations. Yet due to my lack of experience on vue and pnpm, I can not correctly set up the repo, there're lint warnings and type-check errors like below:

I use wsl and vscode for developing, is there any other thing I should do after git clone and pnpm i?

[gruhn]

@Sec-ant thanks man for taking on these issues all the time 🙏

I'm also not super confident with the new tool chain. Also, still haven't managed to setup my editor to detect type errors in .vue files. I'm fixing them now (see #364).

I use wsl and vscode for developing, is there any other thing I should do after git clone and pnpm i?

You can run npm run docs:dev to bring up a locally served version of the demo page. Also, when you create a Pull Request a preview of the demo page should automatically be deployed on every new commit:

Feel free to open PRs just to update the barcode detector package.

As a side note: I own the barcode-detector package on NPM (without user prefix). If you want I can probably transfer ownership to you somehow.

[Sec-ant]

I'm fixing them now (see #364).

Very nice, those errors are already gone now! And thanks for the tips on how to play with the demo.

As a side note: I own the barcode-detector package on NPM (without user prefix). If you want I can probably transfer ownership to you somehow.

That's very kind of you, and I'm truly honored by your offer. However, I don't want to act impolite, and if that's not your inclined choice and you want to keep it that's totally fine by me ❤️.

[gruhn]

Don’t worry, I’m very happy to get rid of some maintenance responsibility 😄 The question is rather if you wanna go through the hassle. NPM won’t let us delete package versions as far as I know, so you have to inherit the version history of barcode-derector, which is a bit in conflict with @sec-ant/barcode-detector, because they both have a version 1.0.0 for example.

[Sec-ant]

NPM won’t let us delete package versions as far as I know, so you have to inherit the version history of barcode-derector

That wouldn't be a problem. I can start using that package name with a new major version bump (v2), so ppl will not accidentally introduce breaking changes. And if you're still interested in keeping it in maintenance mode for a while I can also wait :)

[gruhn]

I can start using that package name with a new major version bump (v2)

That sounds like good idea :) You should have received a maintainer invite for the package now. Tell me when you're done then I can archive my repo and link to yours.

[Sec-ant]

@gruhn I've accepted. Thanks again. I'll let you know when it's ready.

[github-actions]

🎉 This issue has been resolved in version 5.3.2 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀