Facing a ReferenceError: self is not defined while installing on NextJS

Hi there,

Thank you for creating such a beautiful piece of QRCode art! Really thankful for the project!

Sadly, when I had attempted to install and run QR-code-styling, the code seem to be broken.

Primarily, the issue came up when I started to run an import QRCodeStyling from "qr-code-styling"; in my NextJS setup.

• “next”: “latest”,
• “qr-code-styling”: “^1.6.0-rc.1”, (Also tried v1.5.0 but also didn’t work)
• “react”: “^17.0.2”,

Here are the error messages of ReferenceError: self is not defined:

---

---

Hope you may help assist with the issue. Thank you so much! Cheers!

[AlexandrePhilibert]

I got around this issue by using ES6 dynamic imports : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports

Example:

const ref = useRef<HTMLDivElement>(null);

useEffect(() => {
    // Dynamically import qr-code-styling only client-side
    if (typeof window !== "undefined") {
      import("qr-code-styling").then({ default: QRCodeStyling }) => {
        const qrCode = new QRCodeStyling({
          width: 200,
          height: 200,
          data: "https://google.com",
        });

        qrCode.append(ref.current);
      });
   }
}, []);

[T04435]

I faced this issue as well my solution uses dynamic import from NEXTJS

https://nextjs.org/docs/advanced-features/dynamic-import

So Create a component QR.tsx (whatever really)

and on you Page imported like, important bit is to disable ssr

const DynamicQRCode = dynamic(() => import('@Components/QRCode/QRCode'), {
  ssr: false
});