QR Code Generator for JavaScript

Common errors

• ReferenceError: qrcode is not defined

  cause The `qrcode` factory function was accessed without being correctly imported or loaded into the execution context (e.g., forgetting an `import` statement in Node.js or a `<script>` tag in a browser).
  fix In module environments, add `import qrcode from 'qrcode-generator';` (ESM) or `const qrcode = require('qrcode-generator');` (CJS). In browsers, ensure the `qrcode.js` script is loaded before use.

• QR code appears empty or contains incorrect data.

  cause This often occurs when `qr.addData()` was not called with the desired content, or more commonly, when `qr.make()` was not invoked after adding data and before calling a rendering method like `createImgTag()` or `createSvgTag()`.
  fix Verify that `qr.addData('your content here')` is called with the correct string, and critically, that `qr.make();` is executed immediately after `addData()` and before any rendering functions.

• TypeError: Cannot read properties of undefined (reading 'createSvgTag')

  cause This error typically means the `qr` object itself is undefined, implying the `qrcode()` factory function call failed or returned an undefined value. This could be due to incorrect arguments or a fundamental issue with the `qrcode` function itself (though rare).
  fix Double-check the arguments passed to `qrcode(typeNumber, errorCorrectionLevel)` to ensure they are valid numbers and strings, respectively. Ensure `qrcode` itself is correctly imported and available.

Warnings

• breaking Version 2.0.0 introduced full module support, changing how the library is imported. Direct global access to `qrcode` (e.g., in a browser without an explicit import) may no longer work as expected without proper bundling or script loading, and `require()` patterns might need adjustment for the default export.
  Fix: For ES Modules, use `import qrcode from 'qrcode-generator';`. For CommonJS, use `const qrcode = require('qrcode-generator');`. Ensure proper script inclusion or bundling in browser environments if not using module imports.
• gotcha The `make()` method *must* be called after adding data (`addData()`) and before attempting to render the QR code or query its modules (e.g., `createImgTag()`, `isDark()`, `getModuleCount()`). Failing to call `make()` will result in empty, incorrect, or incomplete QR code output.
  Fix: Always call `qr.make();` after `qr.addData(...)` and before any rendering or module inspection methods.
• gotcha Custom character set encoding for multibyte characters requires overwriting the internal `qrcode.stringToBytes` function. If not correctly implemented, non-ASCII characters might be encoded incorrectly or lead to issues.
  Fix: For non-default encoding, provide a custom implementation for `qrcode.stringToBytes(s)` that returns an array of byte numbers for the given string `s`.

Install

• npm install qrcode-generator npm
• yarn add qrcode-generator yarn
• pnpm add qrcode-generator pnpm

Imports

• qrcode
  wrong:

  import { qrcode } from 'qrcode-generator';

  correct:

  import qrcode from 'qrcode-generator';

  The primary `qrcode` factory function is exported as the default export. Use this in modern module environments (ESM).
• qrcode
  wrong:

  const { qrcode } = require('qrcode-generator');

  correct:

  const qrcode = require('qrcode-generator');

  For CommonJS environments, the `qrcode` factory function is the direct export of the module.
• QRCode

  import type { QRCode } from 'qrcode-generator';

  Import the `QRCode` interface for type declarations when working with TypeScript.

Quickstart

This example demonstrates how to import the `qrcode` factory function, configure a QR code, add data, generate the code matrix, and then render it as an SVG string, suitable for both Node.js console output or browser DOM manipulation.

import qrcode from 'qrcode-generator';

// Configuration for QR Code
const typeNumber = 4; // Type number (1-40), or 0 for auto-detection
const errorCorrectionLevel = 'M'; // Error correction level ('L', 'M', 'Q', 'H')
const dataToEncode = 'Hello, Checklist Day! This is a test QR code generated using qrcode-generator in a modern JavaScript environment.';

// Create a QR Code instance
const qr = qrcode(typeNumber, errorCorrectionLevel);

// Add data to the QR Code
qr.addData(dataToEncode);

// Make the QR Code (generate the matrix)
qr.make();

// Render the QR Code to an SVG string (Node.js example)
const svgString = qr.createSvgTag(5, 5); // cellSize = 5, margin = 5

console.log('Generated SVG for QR Code:\n', svgString);

// Example for browser environment (hypothetical DOM interaction)
// If running in a browser, you might append this to a DOM element:
// document.getElementById('qr-container').innerHTML = qr.createImgTag(4, 4, 'My QR Code');