-
Notifications
You must be signed in to change notification settings - Fork 462
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Importing QRCodeStyling into NextJS immediately fails #38
Comments
same issue encountered! @Ali762 can you share how to use the code inside the component after that import |
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.
then
|
@Ali762 thank you! it works with no delay. another note is when you use it with ssr:false it will have delay creating 1 and if more than 1 lets say 100 qr at the same time will only create 2 qr's. but with this way. it solve the issue |
FWIW, I ran into this issue "self is not defined" on Node JS because this library has number of dependencies on the browser. I eventually got it to work by emulating various components. Here's what worked at this point in time: // emulate browser dependencies
const Blob = require("cross-blob");
const Canvas = require("canvas");
const { JSDOM } = require("jsdom");
global.Blob = Blob;
global.window = new JSDOM().window;
global.self = global.window;
global.document = global.window.document;
global.Image = Canvas.Image;
global.XMLSerializer = global.window.XMLSerializer;
// swallow not implemented location changes (https://github.com/jsdom/jsdom/issues/2112#issuecomment-673540137)
const listeners = window._virtualConsole.listeners('jsdomError');
const originalListener = listeners && listeners[0];
window._virtualConsole.removeAllListeners('jsdomError');
window._virtualConsole.addListener('jsdomError', error => {
if (
error.type !== 'not implemented' &&
error.message !== 'Not implemented: navigation (except hash changes)' &&
originalListener
) {
originalListener(error);
}
// swallow error
}); |
Should be solved by webpack's
|
I just ran into this issue and I solved it by using dynamic imports with the |
I created a react hook to use QRCodeStyling in NextJS. The following code should help it also uses typescript.
|
|
hello, @rtorcato . it's working for me. Thanks.
How to fix it? |
this should solve it. It should just be eslint error |
Thanks, @rtorcato |
thanks @rtorcato it works |
Hey, Thanks for this, I'm having similar issue in Nuxt 3, I took reference from your dynamic import thing and it worked well. Here's the snippet for Nuxt 3
|
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"); }
The text was updated successfully, but these errors were encountered: