Library generates invalid QR code

[AndreasGassmann]

We built a library (beacon-sdk) that is using this library to generate QR codes. There are many apps using our library and it works without any issues.

However, I recently tried adding our library to a specific react project and for some reason, the QR code that is generated on that site is invalid. It seems to have a weird "pattern" as shown in the example below.

Because it works without any problems in 99% of the cases, I'm pretty sure this is somehow related to the project I'm using it in (which is using a reactjs library that itself also relies on qrcode-generator. But nonetheless, the error seems to happen within this library.

I have no idea how I can go about fixing this issue because everything looks good code wise. Do you have any idea what could be going on? Thanks so much for any help.

This is the code that I'm using to generate the invalid QR code:

Code

const typeNumber = 0;
const errorCorrectionLevel = 'L';
const qr = qrcode(typeNumber, errorCorrectionLevel);

qr.addData('this is a test. this is a test. this is a test. this is a test.');
qr.make();

console.log(qr.createASCII());

return qr.createSvgTag();

Examples

Ascii (in the browser log):

█████████████████████████████████████
██ ▄▄▄▄▄ █ ▀▀▄ ▄▄▄▄▄▄▄▄▄▄▄▄█ ▄▄▄▄▄ ██
██ █   █ ███ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄█ █   █ ██
██ █▄▄▄█ █ ▄▄ █▄▄▄▄▄▄▄▄▄▄▄▄█ █▄▄▄█ ██
██▄▄▄▄▄▄▄█ █ ▀ █▄█▄█▄█▄█▄█▄█▄▄▄▄▄▄▄██
██▄▄▄█▀ ▄▀   ██▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄██▄▄██
██▄█▀▀▄ ▄▄ ▀█▄█▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄██
██ ▄███▄▄██ █▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄██
███▄▀ ██▄ ▄▄▄▀ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄██
██  █▀▄▄▄ ▀▀ ██ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄██
██▀▀ █▀█▄▀▄██▄█▀█▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄██
██▄██ █▄▄█   ▄ ▄█▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄██
██▄▄█ █▄▄▄█▀▄▀ ▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄██
██▄▄█▄▄█▄█ █▄██  ▄▄▄▄▄▄▄▄▄ ▄▄▄ ▄▄▄▄██
██ ▄▄▄▄▄ █▀▄█▄█▀█▄▄▄▄▄▄▄▄▄ █▄█ ▄▄  ██
██ █   █ ██▄█▄ ▄█▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▀▀██
██ █▄▄▄█ █ ▀ ▀ ▄ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄██
██▄▄▄▄▄▄▄█▄█▄██▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄█▄██
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀

This happens when I change the error correction code to "H":

This happens when I change the data to:

qr.addData('this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.');

L:

H:

qr.addData('test');

L:

[kazuhikoarase]

Hi, Thanks for your report. But I could not reproduce it..

[AndreasGassmann]

Yes, under normal circumstances it works without any issues. It is only when used in this specific project that the resulting QR codes are wrong.

I was hoping you could give me some pointers about how I could go about debugging this. Because the code from this library that I call is very minimal, so somehow the internal state / logic of this module is affected by something in that project that breaks it. The pattern that is generated, could you explain how this could happen? I don't know the specifics about how QR codes are generated, but it looks like there are alternating "white" and "black" tiles, so maybe it could be related so some kind of padding?

[AndreasGassmann]

I found the issue. One of the libraries that was used in that project overwrote the stringToBytes method of qrcode-generator, which broke the functionality when passing in a regular string.

Sorry for wasting your time and thanks for creating this great library.