ReferenceError: Buffer is not defined

[anuj9196]

I'm trying to get it to work in Angular 8.

In the component.ts file

import QRCode from 'qrcode`;

export class MyComponent implements OnInit {
    ngOnInit() {
        const canvas = document.getElementById('canvas');
        QRCode.toCanvas(canvas, 'Hello World', (res) => {
            console.log('res: ', res);
         });
    }
}

But this is giving an error:

ReferenceError: Buffer is not defined
    at ReedSolomonEncoder.encode (reed-solomon-encoder.js:37)
    at createCodewords (qrcode.js:340)
    at createData (qrcode.js:286)
    at createSymbol (qrcode.js:424)
    at Object.create (qrcode.js:498)
    at browser.js:53
    at new ZoneAwarePromise (polyfills.js:3725)
    at renderCanvas (browser.js:51)

[lyxia]

+1

[soldair]

thanks I just released a version yesterday that probably introduced this.
ill take a look now

[soldair]

please try version 1.4.4 and let me know

[anuj9196]

@soldair Thanks. It's working now.

[davidknoll]

@soldair I've just found this issue and I'm experiencing it or something similar on 1.2.2, 1.3.4, 1.4.0-1.4.4, and master at eb2d499. I'm using AngularJS 1.5.8, with qrcode in the frontend/browser, and the error appears in the browser debug console. On some versions of qrcode the root component of my app won't instantiate, on some it only triggers once I try to use it.

[plumpNation]

If anyone is coming here from a rollup project, https://www.npmjs.com/package/rollup-plugin-node-builtins

[james-innes]

As per this discussion around node-globals/node-builtins I found rollup-plugin-node-polyfills got the QR code working for me using Rollup with Svelte.