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

[sgrobert]

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!

[joechimo]

When installing via npm and running this in a Nodejs application, I am encountering the same exact issue. I am attempting to produce raw data. I am using Nodejs v15.9.0 and I have installed version 1.6.0-rc.1 of the module.

[sgrobert]

Hi Willem,

Thanks for the update on this.

And Yes. Apparently the update to Next v12.0.3. does work.

Sadly, I do realise QR Styling isn't fitting into my use case, as I wanted to generate multiple QR Codes directly on the fly, using only one QR Styling Component code

However, based on the API, it seems like I need to manually inject the newly-formed QR through "qrCode.append(document.getElementById("canvas"));". This would then require me to hardcode at the moment.

I was wondering if you may know the generation may be called via a <QRStyling /> code, which can be generated easily for multiple instances?

Nonetheless, really appreciative that you have stepped forward to help with the fix! Cheers! ;)

Yours sincerely, Robert Chai

On Sun, Nov 7, 2021 at 9:18 AM Willem Himpe @.***> wrote:

I was able to fix it to update to "next": "12.0.3".

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/kozakdenys/qr-code-styling/issues/89#issuecomment-962534641, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAFZP7KN55LHTKTBJUHPBK3UKXHU5ANCNFSM5HCKMVCQ .

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

[AshuTheDoughnut]

I am still facing this issue, even dynamic import is not working. I don't wanna use it on a webpage. Just need QR as Buffer data.

[sc0rp10n-py]

i get same error, https://github.com/kozakdenys/qr-code-styling/issues/172 but i am trying to use it in backend side of nextjs