Dependency error: ReferenceError: self is not defined for qr-code-styling

[KunalBagaria]

Dependency (qr-code-styling) error while trying to use the package in Next.js@12.0.0

Server Error

ReferenceError: self is not defined
This error happened while generating the page. Any console logs will be displayed in the terminal window.

It's the same even if I only use the encodeURL method.

Linking to a issue and PR for this error in their repository:
kozakdenys/qr-code-styling#38
kozakdenys/qr-code-styling#64

[jordaaash]

Thanks for the report, Next.js is really important to support. Do you happen to have a repo that reproduces the issue? Happy to take a look.

[KunalBagaria]

Yeah, just made one: https://github.com/kb24x7/solana-pay-next

[jordaaash]

Ah, I see the issue. I had to use this for Jest to run the tests: https://github.com/solana-labs/solana-pay/blob/d7e21ab3da5ac1ed110ba48375e0800a0fc4f8d5/core/jest.config.json#L3

I think the issue is that the QR code library accesses this, https://developer.mozilla.org/en-US/docs/Web/API/Window/self, probably to make UMD build.

While this workaround is an option, disabling SSR is kind of a drag.

If that library is no longer maintained, we should fork it and fix this.

[jordaaash]

This is fixed in @solana/pay@0.1.0-alpha.7, I tested it with your Next app:

[KunalBagaria]

Great! Thanks for the quick fix, actually I did make myself a fork as well 😄

[zhen1asemen1uk]

Help please with this problem 😥
I don't see solving

[zholadev]

import through next/dynamic