ReferenceError self is not defined : Can this library work with React/Next applications ?

[kishimisu]

I'm trying to use this library in a Next/Vercel project however I get the following error :

ReferenceError: self is not defined
    at eval (webpack-internal:///./libs/canvas-capture.js:5:4)

which seems to indicate that the library doesn't have the window context. Not sure if this is more of a Next setup issue or if the library should work with these frameworks ?

[amandaghassaei]

Seems like this could be relevant:

• https://stackoverflow.com/questions/64639839/typescript-webpack-library-generates-referenceerror-self-is-not-defined
• https://webpack.js.org/configuration/output/#outputglobalobject

I made a branch with this change, try:

npm install git+https://github.com/amandaghassaei/canvas-capture.git#globalObject

let me know if that works and I'll merge it in.

[roygav]

@amandaghassaei it worked, thanks. But now there's a different error - ReferenceError: window is not defined i'm trying to execute this on node, so i suppose it's not built for node usage 😢

[kishimisu]

@amandaghassaei Sorry I didn't see your update. I've tested the branch on a new NextJS App and I get the same error as @roygav : ReferenceError: window is not defined

[nguyenvanan18031993]

@amandaghassaei @roygav roy @indiana-dev in
I got this error too :
ReferenceError: window is not defined
Any update fix it? Please help me

[amandaghassaei]

I looked into this a bit - the underlying dependencies in CCapture do not play nicely with the node environment, so unfortunately I think this is not supported right now. Eventually I'd like to redo this whole repo from the ground up and get rid of the dependency on CCapture, but not in the cards anytime soon.

[kevmiota]

@indiana-dev @amandaghassaei I could make it work in nextjs by using dynamic import inside an async function:

async function capture(canvas){
    const CanvasCapture = (await import('canvas-capture')).default;
    CanvasCapture.init( canvas );
    ....
}

This way, we can make sure, that this npm package is not loaded on the server but only on client-side where window is available