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

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);
      });
   }
}, []);

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
});