NextJS: Module not found: Can't resolve 'canvas'

[developer-sushant]

I am trying to use react-konva in nextjs and getting an error:

./node_modules/konva/lib/index-node.js:4:15
Module not found: Can't resolve 'canvas'
Did you mean './canvas'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

https://nextjs.org/docs/messages/module-not-found

[lavrton]

Did you try this https://github.com/konvajs/react-konva?tab=readme-ov-file#usage-with-nextjs ?

[FranciscoAnghinoni]

Hey @developer-sushant,
I'm guessing you're having trouble getting Canvas to work on your Mac. I had the same problem!
You probably need to install Xcode and Homebrew first. I don't remember the exact steps, but I googled the error message on Google's AI website (ai.google.com) and found instructions. After using Homebrew to install some things, Canvas finally worked for me.
Hope this helps!