Importing QRCodeStyling into NextJS immediately fails

Using version 1.3.4

Simply adding import QRCodeStyling from "qr-code-styling";

causes the package to immediately fail with server error: ReferenceError: self is not defined

The library does not check to verify it’s running client side.

Workaround for now is to replace the import statement with if (typeof window !== "undefined") { console.log("i am client"); const QRCodeStyling = require("qr-code-styling"); }

[Ali762]

I got it working like this. I’m not sure why I used qrCode update - you might be able to use your data directly in the options.

export function QR( mydata) {
  let qrCode;
  if (typeof window !== "undefined") {           //Only do this on the client
    const QRCodeStyling = require("qr-code-styling");
    qrCode = new QRCodeStyling({
      width: 600,
      height: 600,
      data: "yourdata",
     ...etc

then

 qrCode.update({
    data: mydata,
  });

[rtorcato]

I created a react hook to use QRCodeStyling in NextJS. The following code should help it also uses typescript.

import React, { useEffect, useRef, useState } from 'react'

import DashboardLayout from '@app/layouts/DashboardLayout'
import { IPage } from '@app/ts/nextJS.types'
import PageContainer from '@app/components/containers/PageContainer'
import QRCodeStyling, { Options as QRCodeStylingOptions, FileExtension } from 'qr-code-styling'
import CardContainer from '@app/components/containers/CardContainer'
import Button from '@app/components/buttons/Button'

const styles = {
  inputWrapper: {
    margin: '20px 0',
    display: 'flex',
    justifyContent: 'space-between',
    width: '100%',
  },
  inputBox: {
    flexGrow: 1,
    marginRight: 20,
  },
}

const qrOptions: QRCodeStylingOptions = {
  width: 300,
  height: 300,
  image: 'https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg',
  dotsOptions: {
    color: '#4267b2',
    type: 'rounded',
  },
  imageOptions: {
    crossOrigin: 'anonymous',
    margin: 20,
  },
}

const useQRCodeStyling = (options: QRCodeStylingOptions): QRCodeStyling | null => {
  //Only do this on the client
  if (typeof window !== 'undefined') {
    // eslint-disable-next-line @typescript-eslint/no-var-requires
    const QRCodeStylingLib = require('qr-code-styling')
    const qrCodeStyling: QRCodeStyling = new QRCodeStylingLib(options)
    return qrCodeStyling
  }
  return null
}

const QrCodePage: IPage = () => {
  const [url, setUrl] = useState('https://cardstore.matrixdigital.com')
  const [fileExt, setFileExt] = useState<FileExtension | undefined>('png')
  const qrCode = useQRCodeStyling(qrOptions)
  const ref = useRef<any>(null)

  useEffect(() => {
    qrCode?.append(ref.current)
  }, [ref, qrCode])

  useEffect(() => {
    qrCode?.update({ data: url })
  }, [url, qrCode])

  const onUrlChange: React.ChangeEventHandler<HTMLInputElement> | undefined = (event) => {
    event.preventDefault()
    setUrl(event.target.value)
  }

  const onExtensionChange: React.ChangeEventHandler<HTMLSelectElement> | undefined = (event) => {
    setFileExt(event.target.value as FileExtension)
  }

  const onDownloadClick = () => {
    qrCode?.download({ extension: fileExt })
  }
  return (
    <PageContainer>
      <CardContainer>
        <div className="m-3">
          <h1 className="text-lg text-medium">QR Codes</h1>
          <div className="my-5">
            <div style={styles.inputWrapper}>
              <input value={url} onChange={onUrlChange} style={styles.inputBox} />
              <select onChange={onExtensionChange} value={fileExt}>
                <option value="png">PNG</option>
                <option value="jpeg">JPEG</option>
                <option value="webp">WEBP</option>
              </select>
              <Button theme="primary" onClick={onDownloadClick}>
                Download
              </Button>
            </div>
            <div ref={ref} />
          </div>
        </div>
      </CardContainer>
    </PageContainer>
  )
}
QrCodePage.getLayout = (page) => <DashboardLayout>{page}</DashboardLayout>

export default QrCodePage